.github/workflows/nodejs.yml

@@ -0,0 +1,29 @@
+name: Node CI
+
+on:
+  pull_request:
+    branches:
+    - master
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [8.x, 10.x, 12.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run build --if-present
+        npm test
+      env:
+        CI: true

README.md

@@ -167,6 +167,11 @@ b.list.push(
 b.list[1].count === 1; // true
 ```
 
+### ***Using*** `reactive` will mutate the origin object
+
+This is an limitation of using `Vue.observable` in Vue 2.
+> Vue 3 will return an new proxy object.
+
 ---
 
 ## `watch()` API
@@ -306,3 +311,25 @@ declare module '@vue/composition-api/dist/component/component' {
   }
 }
 ```
+
+## SSR
+
+Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.
+
+```js
+import { onServerPrefetch } from '@vue/composition-api';
+
+export default {
+  setup (props, { ssrContext }) {
+    const result = ref();
+
+    onServerPrefetch(async () => {
+      result.value = await callApi(ssrContext.someId);
+    });
+
+    return {
+      result,
+    };
+  },
+};
+```

README.zh-CN.md

@@ -167,6 +167,11 @@ b.list.push(
 b.list[1].count === 1; // true
 ```
 
+### `reactive` 会返回一个修改过的原始的对象
+
+此行为与 Vue 2 中的 `Vue.observable` 一致
+> Vue 3 中会返回一个新的的代理对象.
+
 ---
 
 ## `watch()` API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/composition-api",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Provide logic composition capabilities for Vue.",
   "keywords": [
     "vue",
@@ -46,7 +46,8 @@
     "ts-jest": "^24.0.2",
     "typescript": "^3.6.2",
     "vue": "^2.5.22",
-    "vue-router": "^3.1.3"
+    "vue-router": "^3.1.3",
+    "vue-server-renderer": "^2.6.10"
   },
   "peerDependencies": {
     "vue": "^2.5.22"

src/apis/computed.ts

@@ -9,11 +9,13 @@ interface Option<T> {
 }
 
 // read-only
-export function computed<T>(getter: Option<T>['get']): Ref<T>;
+export function computed<T>(getter: Option<T>['get']): Readonly<Ref<Readonly<T>>>;
 // writable
-export function computed<T>(options: Option<T>): Ref<T>;
+export function computed<T>(options: Option<T>): Ref<Readonly<T>>;
 // implement
-export function computed<T>(options: Option<T>['get'] | Option<T>): Ref<T> {
+export function computed<T>(
+  options: Option<T>['get'] | Option<T>
+): Readonly<Ref<Readonly<T>>> | Ref<Readonly<T>> {
   const vm = getCurrentVM();
   let get: Option<T>['get'], set: Option<T>['set'] | undefined;
   if (typeof options === 'function') {

src/apis/lifecycle.ts

@@ -38,3 +38,4 @@ export const onUnmounted = createLifeCycles(['destroyed', 'deactivated'], genNam
 export const onErrorCaptured = createLifeCycle('errorCaptured');
 export const onActivated = createLifeCycle('activated');
 export const onDeactivated = createLifeCycle('deactivated');
+export const onServerPrefetch = createLifeCycle('serverPrefetch');

src/index.ts

@@ -24,6 +24,9 @@ export default plugin;
 export { default as createElement } from './createElement';
 export { SetupContext };
 export { createComponent, ComponentRenderProxy, PropType, PropOptions } from './component';
+// For getting a hold of the interal instance in setup() - useful for advanced
+// plugins
+export { getCurrentVM as getCurrentInstance } from './runtimeContext';
 
 export * from './apis/state';
 export * from './apis/lifecycle';

src/install.ts

@@ -26,7 +26,7 @@ function mergeData(to: AnyObject, from?: AnyObject): Object {
     } else if (
       toVal !== fromVal &&
       (isPlainObject(toVal) && !isRef(toVal)) &&
-      (isPlainObject(fromVal) && !isRef(toVal))
+      (isPlainObject(fromVal) && !isRef(fromVal))
     ) {
       mergeData(toVal, fromVal);
     }

src/reactivity/reactive.ts

@@ -152,7 +152,7 @@ export function nonReactive<T = any>(obj: T): T {
   }
 
   // set the vue observable flag at obj
-  (obj as any).__ob__ = (observe({}) as any).__ob__;
+  def(obj, '__ob__', (observe({}) as any).__ob__);
   // mark as nonReactive
   def(obj, NonReactiveIdentifierKey, NonReactiveIdentifier);
 

src/setup.ts

@@ -216,7 +216,14 @@ export function mixin(Vue: VueConstructor) {
     const ctx = {
       slots: {},
     } as SetupContext;
-    const props: Array<string | [string, string]> = ['root', 'parent', 'refs', 'attrs', 'listeners'];
+    const props: Array<string | [string, string]> = [
+      'root',
+      'parent',
+      'refs',
+      'attrs',
+      'listeners',
+      'ssrContext',
+    ];
     const methodReturnVoid = ['emit'];
     props.forEach(key => {
       let targetKey: string;

test/setup.spec.js

@@ -276,6 +276,24 @@ describe('setup', () => {
       .then(done);
   });
 
+  it("should put a unenumerable '__ob__' for non-reactive object", () => {
+    const clone = obj => JSON.parse(JSON.stringify(obj));
+    const componentSetup = jest.fn(props => {
+      const internalOptions = clone(props.options);
+      return { internalOptions };
+    });
+    const ExternalComponent = {
+      props: ['options'],
+      setup: componentSetup,
+    };
+    new Vue({
+      components: { ExternalComponent },
+      setup: () => ({ options: {} }),
+      template: `<external-component :options="options"></external-component>`,
+    }).$mount();
+    expect(componentSetup).toReturn();
+  });
+
   it('current vue should exist in nested setup call', () => {
     const spy = jest.fn();
     new Vue({

test/ssr/serverPrefetch.spec.js

@@ -0,0 +1,139 @@
+const Vue = require('vue/dist/vue.common.js');
+const { createRenderer } = require('vue-server-renderer');
+const { ref, onServerPrefetch, getCurrentInstance, provide, inject } = require('../../src');
+
+function fetch(result) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(result);
+    }, 10);
+  });
+}
+
+describe('serverPrefetch', () => {
+  it('should prefetch async operations before rendering', async () => {
+    const app = new Vue({
+      setup() {
+        const count = ref(0);
+
+        onServerPrefetch(async () => {
+          count.value = await fetch(42);
+        });
+
+        return {
+          count,
+        };
+      },
+      render(h) {
+        return h('div', this.count);
+      },
+    });
+
+    const serverRenderer = createRenderer();
+    const html = await serverRenderer.renderToString(app);
+    expect(html).toBe('<div data-server-rendered="true">42</div>');
+  });
+
+  it('should prefetch many async operations before rendering', async () => {
+    const app = new Vue({
+      setup() {
+        const count = ref(0);
+        const label = ref('');
+
+        onServerPrefetch(async () => {
+          count.value = await fetch(42);
+        });
+
+        onServerPrefetch(async () => {
+          label.value = await fetch('meow');
+        });
+
+        return {
+          count,
+          label,
+        };
+      },
+      render(h) {
+        return h('div', [this.count, this.label]);
+      },
+    });
+
+    const serverRenderer = createRenderer();
+    const html = await serverRenderer.renderToString(app);
+    expect(html).toBe('<div data-server-rendered="true">42meow</div>');
+  });
+
+  it('should pass ssrContext', async () => {
+    const child = {
+      setup(props, { ssrContext }) {
+        const content = ref();
+
+        expect(ssrContext.foo).toBe('bar');
+
+        onServerPrefetch(async () => {
+          content.value = await fetch(ssrContext.foo);
+        });
+
+        return {
+          content,
+        };
+      },
+      render(h) {
+        return h('div', this.content);
+      },
+    };
+
+    const app = new Vue({
+      components: {
+        child,
+      },
+      render(h) {
+        return h('child');
+      },
+    });
+
+    const serverRenderer = createRenderer();
+    const html = await serverRenderer.renderToString(app, { foo: 'bar' });
+    expect(html).toBe('<div data-server-rendered="true">bar</div>');
+  });
+
+  it('should not share context', async () => {
+    const instances = [];
+    function createApp(context) {
+      return new Vue({
+        setup() {
+          const count = ref(0);
+
+          onServerPrefetch(async () => {
+            count.value = await fetch(context.result);
+          });
+
+          instances.push(getCurrentInstance());
+
+          return {
+            count,
+          };
+        },
+        render(h) {
+          return h('div', this.count);
+        },
+      });
+    }
+
+    const serverRenderer = createRenderer();
+    const promises = [];
+    // Parallel requests
+    for (let i = 1; i < 3; i++) {
+      promises.push(
+        new Promise(async resolve => {
+          const app = createApp({ result: i });
+          const html = await serverRenderer.renderToString(app);
+          expect(html).toBe(`<div data-server-rendered="true">${i}</div>`);
+          resolve();
+        })
+      );
+    }
+    await Promise.all(promises);
+    expect((instances[0] === instances[1]) === instances[2]).toBe(false);
+  });
+});