From: Eduardo San Martin Morote Date: Mon, 25 Nov 2019 11:07:06 +0000 (+0100) Subject: test: basic ssr X-Git-Tag: v0.0.1~10 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9578655c316f1555f9c952ddc21e47510eccc88a;p=thirdparty%2Fvuejs%2Fpinia.git test: basic ssr --- diff --git a/__tests__/ssr/app.spec.ts b/__tests__/ssr/app.spec.ts new file mode 100644 index 00000000..24b537bc --- /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( + `"

Hi anon

Count: 0 x 2 = 0

"` + ) + }) +}) diff --git a/__tests__/ssr/app/App.ts b/__tests__/ssr/app/App.ts new file mode 100644 index 00000000..dd848fdc --- /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: ` +
+

Hi {{ state.name }}

+

Count: {{ state.counter }} x 2 = {{ doubleCount }}

+ +
+ `, +}) diff --git a/__tests__/ssr/app/entry-server.ts b/__tests__/ssr/app/entry-server.ts new file mode 100644 index 00000000..71190c17 --- /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 index 00000000..f06891f0 --- /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 index 00000000..55d09aae --- /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 8409325f..74d9fbce 100644 --- 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 63844cf3..11e9101f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -121,27 +121,27 @@ export function createStore( * @param buildState function that returns a state */ -// function makeStore( -// id: Id, -// buildState: () => S -// ) { -// let store: Store | undefined - -// function useStore(): Store { -// if (!store) store = createStore(id, buildState) - -// return store -// } - -// function clear(): void { -// store = undefined -// } - -// return { -// useStore, -// clear, -// } -// } +export function makeStore( + id: Id, + buildState: () => S +) { + let store: Store | undefined + + function useStore(): Store { + 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 f35fd3b7..58590615 100644 --- 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 869ea9a4..018f9f92 100644 --- 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"