From 2015140d1287bcf3701b170cd7d4000b01270c82 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 14 Feb 2019 19:26:58 +0330 Subject: [PATCH] feat(vue-app): universal fetch (#5028) * pkg(nuxt-start): add node-fetch, unfetch * pkg(vue-app): add node-fetch, unfetch * add yarn.lock * feat(config): _app.fetch options * feat(builder): add fetch to templateVars * feat(vue-app): polyfill global with fetch * feat(fixtures/basic): /api/test * add fetch example to fixtures * remove unfetch from nuxt-start * update template snapshot * revert extra new line in server.js * single line if --- distributions/nuxt-start/package.json | 1 + packages/builder/src/context/template.js | 1 + .../__snapshots__/template.test.js.snap | 1 + packages/config/src/config/_app.js | 5 +++ .../test/__snapshots__/options.test.js.snap | 4 +++ .../config/__snapshots__/index.test.js.snap | 8 +++++ packages/vue-app/package.json | 2 ++ packages/vue-app/template/client.js | 3 ++ packages/vue-app/template/server.js | 3 ++ test/fixtures/basic/nuxt.config.js | 6 ++++ test/fixtures/basic/pages/fetch.vue | 34 +++++++++++++++++++ yarn.lock | 5 +++ 12 files changed, 73 insertions(+) create mode 100644 test/fixtures/basic/pages/fetch.vue diff --git a/distributions/nuxt-start/package.json b/distributions/nuxt-start/package.json index c254353d21..67e5fe6baf 100644 --- a/distributions/nuxt-start/package.json +++ b/distributions/nuxt-start/package.json @@ -54,6 +54,7 @@ "dependencies": { "@nuxt/cli": "2.4.3", "@nuxt/core": "2.4.3", + "node-fetch": "^2.3.0", "vue": "^2.6.6", "vue-meta": "^1.5.8", "vue-no-ssr": "^1.1.1", diff --git a/packages/builder/src/context/template.js b/packages/builder/src/context/template.js index f3af55b268..7c5971d007 100644 --- a/packages/builder/src/context/template.js +++ b/packages/builder/src/context/template.js @@ -21,6 +21,7 @@ export default class TemplateContext { isTest: options.test, debug: options.debug, vue: { config: options.vue.config }, + fetch: options.fetch, mode: options.mode, router: options.router, env: options.env, diff --git a/packages/builder/test/context/__snapshots__/template.test.js.snap b/packages/builder/test/context/__snapshots__/template.test.js.snap index 952b4e7193..6fb2a1e0a6 100644 --- a/packages/builder/test/context/__snapshots__/template.test.js.snap +++ b/packages/builder/test/context/__snapshots__/template.test.js.snap @@ -19,6 +19,7 @@ TemplateContext { ], "env": "test_env", "extensions": "test|ext", + "fetch": undefined, "globalName": "test_global", "globals": Array [ "globals", diff --git a/packages/config/src/config/_app.js b/packages/config/src/config/_app.js index c591728e9c..ac8c58f3c3 100644 --- a/packages/config/src/config/_app.js +++ b/packages/config/src/config/_app.js @@ -13,6 +13,11 @@ export default () => ({ script: [] }, + fetch: { + server: true, + client: true + }, + plugins: [], css: [], diff --git a/packages/config/test/__snapshots__/options.test.js.snap b/packages/config/test/__snapshots__/options.test.js.snap index f5803e59b4..8324643528 100644 --- a/packages/config/test/__snapshots__/options.test.js.snap +++ b/packages/config/test/__snapshots__/options.test.js.snap @@ -156,6 +156,10 @@ Object { "mjs", "ts", ], + "fetch": Object { + "client": true, + "server": true, + }, "generate": Object { "concurrency": 500, "dir": "/var/nuxt/test/dist", diff --git a/packages/config/test/config/__snapshots__/index.test.js.snap b/packages/config/test/config/__snapshots__/index.test.js.snap index 23837bdcc4..bb9c006373 100644 --- a/packages/config/test/config/__snapshots__/index.test.js.snap +++ b/packages/config/test/config/__snapshots__/index.test.js.snap @@ -142,6 +142,10 @@ Object { "editor": undefined, "env": Object {}, "extensions": Array [], + "fetch": Object { + "client": true, + "server": true, + }, "generate": Object { "concurrency": 500, "dir": "dist", @@ -466,6 +470,10 @@ Object { "editor": undefined, "env": Object {}, "extensions": Array [], + "fetch": Object { + "client": true, + "server": true, + }, "generate": Object { "concurrency": 500, "dir": "dist", diff --git a/packages/vue-app/package.json b/packages/vue-app/package.json index 59c3f7df00..fcbd48a9c0 100644 --- a/packages/vue-app/package.json +++ b/packages/vue-app/package.json @@ -12,6 +12,8 @@ "main": "dist/vue-app.js", "typings": "types/index.d.ts", "dependencies": { + "node-fetch": "^2.3.0", + "unfetch": "^4.0.1", "vue": "^2.6.6", "vue-meta": "^1.5.8", "vue-no-ssr": "^1.1.1", diff --git a/packages/vue-app/template/client.js b/packages/vue-app/template/client.js index b6632144ab..8a048b4942 100644 --- a/packages/vue-app/template/client.js +++ b/packages/vue-app/template/client.js @@ -1,4 +1,5 @@ import Vue from 'vue' +<% if (fetch.client) { %>import fetch from 'unfetch'<% } %> import middleware from './middleware.js' import { applyAsyncData, @@ -22,6 +23,8 @@ import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client" Vue.component(NuxtLink.name, NuxtLink) Vue.component('NLink', NuxtLink) +<% if (fetch.client) { %>if (!global.fetch) { global.fetch = fetch }<% } %> + // Global shared references let _lastPaths = [] let app diff --git a/packages/vue-app/template/server.js b/packages/vue-app/template/server.js index 3e49084d1f..24dd8c54a2 100644 --- a/packages/vue-app/template/server.js +++ b/packages/vue-app/template/server.js @@ -1,5 +1,6 @@ import { stringify } from 'querystring' import Vue from 'vue' +<% if (fetch.server) { %>import fetch from 'node-fetch'<% } %> import middleware from './middleware.js' import { applyAsyncData, getMatchedComponents, middlewareSeries, promisify, urlJoin, sanitizeComponent } from './utils.js' import { createApp, NuxtError } from './index.js' @@ -9,6 +10,8 @@ import NuxtLink from './components/nuxt-link.server.js' // should be included af Vue.component(NuxtLink.name, NuxtLink) Vue.component('NLink', NuxtLink) +<% if (fetch.server) { %>if (!global.fetch) { global.fetch = fetch }<% } %> + const debug = require('debug')('nuxt:render') debug.color = 4 // force blue color diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js index f17e9c587b..3ae9716734 100644 --- a/test/fixtures/basic/nuxt.config.js +++ b/test/fixtures/basic/nuxt.config.js @@ -69,6 +69,12 @@ export default { '~/plugins/dir-plugin', '~/plugins/inject' ], + serverMiddleware: [ + { + path: '/api/test', + handler: (_, res) => res.end('Works!') + } + ], build: { scopeHoisting: true, publicPath: '', diff --git a/test/fixtures/basic/pages/fetch.vue b/test/fixtures/basic/pages/fetch.vue new file mode 100644 index 0000000000..7915444930 --- /dev/null +++ b/test/fixtures/basic/pages/fetch.vue @@ -0,0 +1,34 @@ + + + diff --git a/yarn.lock b/yarn.lock index 190ccbe63a..3e0db0e1fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11023,6 +11023,11 @@ umask@^1.1.0: resolved "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d" integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0= +unfetch@^4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/unfetch/-/unfetch-4.0.1.tgz#8750c4c7497ade75d40387d7dbc4ba024416b8f6" + integrity sha512-HzDM9NgldcRvHVDb/O9vKoUszVij30Yw5ePjOZJig8nF/YisG7QN/9CBXZ8dsHLouXMeLZ82r+Jod9M2wFkEbQ== + unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"