test: basic ssr

diff --git a/__tests__/ssr/app.spec.ts b/__tests__/ssr/app.spec.ts
new file mode 100644 (file)
index 0000000..24b537b
--- /dev/null
+++ b/__tests__/ssr/app.spec.ts
@@ -0,0 +1,21 @@
+import renderApp from './app/entry-server'
+import { createRenderer } from 'vue-server-renderer'
+
+const renderer = createRenderer()
+
+describe('classic vue app', () => {
+  it('renders using the store', async () => {
+    const context = {
+      rendered: () => {},
+    }
+    const app = await renderApp(context)
+    // TODO: is this really here?
+    context.rendered()
+
+    // @ts-ignore
+    const html = await renderer.renderToString(app)
+    expect(html).toMatchInlineSnapshot(
+      `"<div data-server-rendered=\\"true\\"><h2>Hi anon</h2> <p>Count: 0 x 2 = 0</p> <button>Increment</button></div>"`
+    )
+  })
+})

diff --git a/__tests__/ssr/app/App.ts b/__tests__/ssr/app/App.ts
new file mode 100644 (file)
index 0000000..dd848fd
--- /dev/null
+++ b/__tests__/ssr/app/App.ts
@@ -0,0 +1,27 @@
+import { createComponent, computed } from '@vue/composition-api'
+import { useStore } from './store'
+
+export default createComponent({
+  setup() {
+    const store = useStore()
+
+    const doubleCount = computed(() => store.state.counter * 2)
+    function increment() {
+      store.state.counter++
+    }
+
+    return {
+      doubleCount,
+      increment,
+      state: store.state,
+    }
+  },
+
+  template: `
+  <div>
+    <h2>Hi {{ state.name }}</h2>
+    <p>Count: {{ state.counter }} x 2 = {{ doubleCount }}</p>
+    <button @click="increment">Increment</button>
+  </div>
+  `,
+})

diff --git a/__tests__/ssr/app/entry-server.ts b/__tests__/ssr/app/entry-server.ts
new file mode 100644 (file)
index 0000000..71190c1
--- /dev/null
+++ b/__tests__/ssr/app/entry-server.ts
@@ -0,0 +1,19 @@
+import { createApp } from './main'
+
+export default function(context: any) {
+  return new Promise(resolve => {
+    const { app, store } = createApp()
+
+    // This `rendered` hook is called when the app has finished rendering
+    context.rendered = () => {
+      // After the app is rendered, our store is now
+      // filled with the state from our components.
+      // When we attach the state to the context, and the `template` option
+      // is used for the renderer, the state will automatically be
+      // serialized and injected into the HTML as `window.__INITIAL_STATE__`.
+      context.state = store.state
+    }
+
+    resolve(app)
+  })
+}

diff --git a/__tests__/ssr/app/main.ts b/__tests__/ssr/app/main.ts
new file mode 100644 (file)
index 0000000..f06891f
--- /dev/null
+++ b/__tests__/ssr/app/main.ts
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+// import VueCompositionApi from '@vue/composition-api'
+import App from './App'
+import { useStore, clear } from './store'
+
+// Done in setup.ts
+// Vue.use(VueCompositionApi)
+
+export function createApp() {
+  // create router and store instances
+  clear()
+  const store = useStore()
+
+  // create the app instance, injecting both the router and the store
+  const app = new Vue({
+    render: h => h(App),
+  })
+
+  // expose the app, the router and the store.
+  return { app, store }
+}

diff --git a/__tests__/ssr/app/store.ts b/__tests__/ssr/app/store.ts
new file mode 100644 (file)
index 0000000..55d09aa
--- /dev/null
+++ b/__tests__/ssr/app/store.ts
@@ -0,0 +1,6 @@
+import { makeStore } from '../../../src'
+
+export const { useStore, clear } = makeStore('main', () => ({
+  counter: 0,
+  name: 'anon',
+}))

diff --git a/package.json b/package.json
index 8409325f24693a9e64645d27cd77af3be7225f29..74d9fbce8fd00bff7345da26b0450dbc7b0ecfc1 100644 (file)
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "ts-jest": "^24.1.0",
     "tsd": "^0.11.0",
     "typescript": "^3.6.3",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-server-renderer": "^2.6.10"
   },
   "repository": {
     "type": "git",

diff --git a/src/index.ts b/src/index.ts
index 63844cf3c0e8759a73f60f85b59f5aa196439aac..11e9101f0a90dd2290718acb6a4c2330f7b4665f 100644 (file)
--- a/src/index.ts
+++ b/src/index.ts
@@ -121,27 +121,27 @@ export function createStore<Id extends string, S extends StateTree>(
  * @param buildState function that returns a state
  */
 
-// function makeStore<Id extends string, S extends StateTree>(
-//   id: Id,
-//   buildState: () => S
-// ) {
-//   let store: Store<Id, S> | undefined
-
-//   function useStore(): Store<Id, S> {
-//     if (!store) store = createStore(id, buildState)
-
-//     return store
-//   }
-
-//   function clear(): void {
-//     store = undefined
-//   }
-
-//   return {
-//     useStore,
-//     clear,
-//   }
-// }
+export function makeStore<Id extends string, S extends StateTree>(
+  id: Id,
+  buildState: () => S
+) {
+  let store: Store<Id, S> | undefined
+
+  function useStore(): Store<Id, S> {
+    if (!store) store = createStore(id, buildState)
+
+    return store
+  }
+
+  function clear(): void {
+    store = undefined
+  }
+
+  return {
+    useStore,
+    clear,
+  }
+}
 
 // export const store = createStore('main', initialState)
 // export const cartStore = createStore('cart', {

diff --git a/tsconfig.json b/tsconfig.json
index f35fd3b749ef89c6b7acd106b36e5bcae668b3d4..585906157d86e1439937ba1958d05a1bda59be96 100644 (file)
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,5 +11,5 @@
     "rootDir": ".",
     "baseUrl": "."
   },
-  "include": ["src", "__tests__"]
+  "include": ["src/**/*.ts", "__tests__/**/**.ts"]
 }

diff --git a/yarn.lock b/yarn.lock
index 869ea9a4c4885e4619f75f8cf006e19a597d349e..018f9f9245967c33a7bb6fc739cd517c426a9c29 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -591,6 +591,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -922,6 +927,17 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1361,7 +1377,7 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -1965,6 +1981,13 @@ har-validator@~5.1.0:
     ajv "^6.5.5"
     har-schema "^2.0.0"
 
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -2018,6 +2041,16 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hash-sum@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
+  integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
+
+he@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 hosted-git-info@^2.1.4:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
@@ -3001,6 +3034,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3011,11 +3049,31 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.template@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
   integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
 
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+
 lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -3998,6 +4056,13 @@ resolve@1.12.0, resolve@1.x, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.11.1,
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.2.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.2.tgz#08b12496d9aa8659c75f534a8f05f0d892fff594"
+  integrity sha512-cAVTI2VLHWYsGOirfeYVVQ7ZDejtQ9fp4YhYckWDEkFfqbVjaT11iM8k6xSAfGFMM+gDpZjMnFssPu8we+mqFw==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -4177,7 +4242,7 @@ semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-serialize-javascript@^1.7.0:
+serialize-javascript@^1.3.0, serialize-javascript@^1.7.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
   integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
@@ -4297,6 +4362,11 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
+
 source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -4502,6 +4572,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -4866,6 +4941,20 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vue-server-renderer@^2.6.10:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.10.tgz#cb2558842ead360ae2ec1f3719b75564a805b375"
+  integrity sha512-UYoCEutBpKzL2fKCwx8zlRtRtwxbPZXKTqbl2iIF4yRZUNO/ovrHyDAJDljft0kd+K0tZhN53XRHkgvCZoIhug==
+  dependencies:
+    chalk "^1.1.3"
+    hash-sum "^1.0.2"
+    he "^1.1.0"
+    lodash.template "^4.4.0"
+    lodash.uniq "^4.5.0"
+    resolve "^1.2.0"
+    serialize-javascript "^1.3.0"
+    source-map "0.5.6"
+
 vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"