From 5433e278ef618d9aef86a25b1a4d03b963232c79 Mon Sep 17 00:00:00 2001 From: Jonas Galvez Date: Sat, 8 May 2021 14:36:28 -0300 Subject: [PATCH 1/4] add svg example --- example/components/Logo.svg | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 example/components/Logo.svg diff --git a/example/components/Logo.svg b/example/components/Logo.svg new file mode 100644 index 0000000..e18148e --- /dev/null +++ b/example/components/Logo.svg @@ -0,0 +1,16 @@ + \ No newline at end of file From 951c82fbd76724d51f52bac3c565d9caec6c780e Mon Sep 17 00:00:00 2001 From: Jonas Galvez Date: Sat, 8 May 2021 15:31:14 -0300 Subject: [PATCH 2/4] add svg to supported extensions --- src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 10fc6db..fd680a4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -66,7 +66,8 @@ const componentsModule: Module = function () { console.warn('Components directory not found: `' + dirPath + '`') } - const extensions = dirOptions.extensions || builder.supportedExtensions + const supportedExtensions = ['svg', ...builder.supportedExtensions] + const extensions = dirOptions.extensions || supportedExtensions return { ...dirOptions, From 57c8c57adbead53c3cf0ba8ec3ce315ee20242da Mon Sep 17 00:00:00 2001 From: Jonas Galvez Date: Sat, 8 May 2021 15:37:21 -0300 Subject: [PATCH 3/4] ensure only non-svgs are registered the old way --- example/pages/index.vue | 1 + src/scan.ts | 1 + templates/components/index.js | 17 +++++++++++++++-- templates/components/plugin.js | 23 +++++++++++++++++++++-- 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/example/pages/index.vue b/example/pages/index.vue index 5788f5c..9163349 100644 --- a/example/pages/index.vue +++ b/example/pages/index.vue @@ -4,6 +4,7 @@
+
Components auto-imported with @nuxt/components
diff --git a/src/scan.ts b/src/scan.ts index 94da6da..f00ea48 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -67,6 +67,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< const chunkName = 'components/' + kebabName let component = { + svg: shortPath.endsWith('.svg'), filePath, pascalName, kebabName, diff --git a/templates/components/index.js b/templates/components/index.js index fb07b7d..4919527 100644 --- a/templates/components/index.js +++ b/templates/components/index.js @@ -1,11 +1,24 @@ import { wrapFunctional } from './utils' -<%= options.getComponents().map(c => { +<% +const rawComponents = options.getComponents() +const components = [] +const svgs = [] +for (const c of rawComponents) { + if (c.svg) { + svgs.push(c) + } else { + components.push(c) + } +} +%> + +<%= components.map(c => { const exp = c.pascalName === c.export ? c.pascalName : `${c.export} as ${c.pascalName}` return `export { ${exp} } from '../${relativeToBuild(c.filePath)}'` }).join('\n') %> -<%= options.getComponents().map(c => { +<%= components.map(c => { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` return `export const Lazy${c.pascalName} = import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))` }).join('\n') %> diff --git a/templates/components/plugin.js b/templates/components/plugin.js index c770000..35155c7 100644 --- a/templates/components/plugin.js +++ b/templates/components/plugin.js @@ -1,12 +1,31 @@ import Vue from 'vue' import { wrapFunctional } from './utils' -<% const components = options.getComponents() %> +<% +const rawComponents = options.getComponents() +const components = [] +const svgs = [] +for (const c of rawComponents) { + if (c.svg) { + svgs.push(c) + } else { + components.push(c) + } +} +%> const components = { <%= components.map(c => { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` - return ` ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))` + return ` ${ + c.pascalName.replace(/^Lazy/, '') + }: () => import('../${ + relativeToBuild(c.filePath) + }' /* webpackChunkName: "${ + c.chunkName + }" */).then(c => wrapFunctional(${ + exp + }))` }).join(',\n') %> } From ec64251b9db3c396bbc8c3e435f7b77b5404006f Mon Sep 17 00:00:00 2001 From: Jonas Galvez Date: Sat, 8 May 2021 16:36:49 -0300 Subject: [PATCH 4/4] add component wrapper for svgs --- templates/components/plugin.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/templates/components/plugin.js b/templates/components/plugin.js index 35155c7..098f70a 100644 --- a/templates/components/plugin.js +++ b/templates/components/plugin.js @@ -17,19 +17,26 @@ for (const c of rawComponents) { const components = { <%= components.map(c => { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` - return ` ${ - c.pascalName.replace(/^Lazy/, '') - }: () => import('../${ - relativeToBuild(c.filePath) - }' /* webpackChunkName: "${ - c.chunkName - }" */).then(c => wrapFunctional(${ - exp - }))` + return ` ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))` }).join(',\n') %> } +const svgs = {} + +<% for (const c of svgs) { %> +svgs[`<%= c.pascalName %>`] = { + render (h) { + const src = require('../<%= relativeToBuild(c.filePath) %>' /* webpackChunkName: "<%= c.chunkName %>" */) + return h('img', { attrs: { src } }) + } +} +<% } %> + for (const name in components) { Vue.component(name, components[name]) Vue.component('Lazy' + name, components[name]) } + +for (const name in svgs) { + Vue.component(name, svgs[name]) +}