fix(build-path): add option for custom build path

- remove staticPath option - added module tests
GrabarzUndPartner · Aug 28, 2020 · ba40832 · ba40832
1 parent 071104c
commit ba40832
Show file tree

Hide file tree

Showing 14 changed files with 874 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ node_modules
 coverage
 dist
 reports
+test/generates
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -52,6 +52,22 @@
         "example/nuxt.config.js"
       ]
     },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug (generate)",
+      "runtimeVersion": "12.1.0",
+      "runtimeArgs": [
+        "--inspect"
+      ],
+      "program": "${workspaceFolder}/node_modules/.bin/nuxt",
+      "outputCapture": "std",
+      "args": [
+        "generate",
+        "--config-file",
+        "example/nuxt.config.js"
+      ]
+    },
     {
       "type": "node",
       "request": "launch",

diff --git a/README.md b/README.md
@@ -33,7 +33,6 @@ yarn add nuxt-custom-elements # or npm install nuxt-custom-elements
         analyzer: true,
         modern: true,
         polyfill: true,
-        staticPath: 'path to static-dir',
         entries: [
 
           // Entry with single tag.
@@ -99,18 +98,14 @@ yarn add nuxt-custom-elements # or npm install nuxt-custom-elements
 
 ## Options
 
-> `staticPath` only available in generate or CLI build. For use in dev mode, the default static directory must be used.
->
-> **Example:** `@/static`
-
-| Property        | Type              | Description                                                                                                                                                          | Default Value                                                | Required |
-| --------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- |
-| `analyzer`      | `Boolean, Object` | Sets `true` for default module config or `object` with custom `webpack-bundle-analyzer` configuration                                                                | `false`                                                      | `false`  |
-| `modern`        | `Boolean`         | Sets `true` for [modern build](https://nuxtjs.org/guides/configuration-glossary/configuration-modern). Default using nuxt option `nuxt.options.modern === 'client'`. | `undefined`                                                  | `false`  |
-| `polyfill`      | `Boolean`         | For cross-browser compatibility (IE9+) use Custom Elements polyfill.                                                                                                 | `false`                                                      | `false`  |
-| `staticPath`    | `String`          | Path to the `static` directory.                                                                                                                                      | `null`                                                       | `false`  |
-| `entries`       | `Array`           | Defines the component bundles.<br><br>Components can be distributed in separate end points.<br>Allows the targeted distribution of resources.                        | `null`                                                       | `true`   |
-| `webpackOutput` | `Object`          | Defines the webpack output options.<br>`filename`, `publicPath`                                                                                                      | [See webpackOutput Example](#override-example-with-function) | `false`  |
+| Property        | Type              | Description                                                                                                                                                                                                                                         | Default Value                                                | Required |
+| --------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- |
+| `buildDir`      | `String`          | Sets destination for custom-element build.                                                                                                                                                                                                          | `undefined`                                                  |
+| `analyzer`      | `Boolean, Object` | Sets `true` for default module config or `object` with custom `webpack-bundle-analyzer` configuration                                                                                                                                               | `false`                                                      | `false`  |
+| `modern`        | `Boolean`         | **Important**: To use `modern`, `modern` must be active in nuxt. <br>Sets `false` for only [client build](https://nuxtjs.org/guides/configuration-glossary/configuration-modern). <br>Default using nuxt option `nuxt.options.modern === 'client'`. | `undefined`                                                  | `false`  |
+| `polyfill`      | `Boolean`         | For cross-browser compatibility (IE9+) use Custom Elements polyfill.                                                                                                                                                                                | `false`                                                      | `false`  |
+| `entries`       | `Array`           | Defines the component bundles.<br><br>Components can be distributed in separate end points.<br>Allows the targeted distribution of resources.                                                                                                       | `null`                                                       | `true`   |
+| `webpackOutput` | `Object`          | Defines the webpack output options.<br>`filename`, `publicPath`                                                                                                                                                                                     | [See webpackOutput Example](#override-example-with-function) | `false`  |
 
 
 ### Important `webpackOutput` Option
@@ -233,7 +228,6 @@ First of all, components that are to be exported as custom elements must be spec
     [
       'nuxt-custom-elements', {
         polyfill: true,
-        staticPath: path.resolve(__dirname, 'src/static'),
         entries: [
           {
             name: 'ComponentAppAbstract',

diff --git a/example/nuxt.config.js b/example/nuxt.config.js
@@ -63,7 +63,6 @@ module.exports = {
         webpackOutput: {
           publicPath: getPublicPath()
         },
-        staticPath: resolve(__dirname, '../example/custom-element/static'),
         entries: [
           {
             name: 'ComponentAppAbstract',

diff --git a/jest.config.js b/jest.config.js
@@ -14,5 +14,11 @@ module.exports = {
   },
   transform: {
     '^.+\\.js$': 'babel-jest'
-  }
+  },
+  testPathIgnorePatterns: [
+    '/node_modules/'
+    // 'test/browser.test.js',
+    // 'test/module.spa.test.js'
+    // 'test/module.universal.test.js'
+  ]
 }
diff --git a/lib/module.js b/lib/module.js
@@ -1,5 +1,6 @@
 import { resolve } from 'path'
-import { getDefaultOptions, getEntriesDir, getEntryNamingMap, generateEntries, initDist, MODULE_NAME } from './utils'
+import consola from 'consola'
+import { getDefaultOptions, getEntriesDir, getEntryNamingMap, generateEntries, MODULE_NAME, onBuildDone, onGeneratedDone } from './utils'
 import { getConfigs, build } from './utils/webpack'
 
 module.exports = function (moduleOptions) {
@@ -9,10 +10,16 @@ module.exports = function (moduleOptions) {
     ...this.options[MODULE_NAME]
   })
 
+  if ('staticPath' in options) {
+    consola.error('nuxt-custom-elements:', 'Option staticPath was removed. Use imports or other copy processes.')
+  }
+
   const nuxt = this.nuxt
 
   if (options.modern === undefined) {
     options.modern = nuxt.options.modern === 'client'
+  } else if (options.modern && nuxt.options.modern !== 'client') {
+    consola.error('nuxt-custom-elements:', 'Can\'t using modern, activate modern build in nuxt')
   }
 
   this.addPlugin({
@@ -38,8 +45,13 @@ function registerHooks (nuxt, options) {
   })
 
   if (!nuxt.options.dev) {
-    nuxt.hook('build:done', builder => getConfigs(builder, options).then(configs => build(configs, nuxt)))
-    nuxt.hook('generate:done', () => initDist(nuxt, options))
+    nuxt.hook('build:done', async (builder) => {
+      await getConfigs(builder, options).then(configs => build(configs, nuxt))
+      if (!nuxt.options.target !== 'static') {
+        await onBuildDone(nuxt, options)
+      }
+    })
+    nuxt.hook('generate:done', () => onGeneratedDone(nuxt, options))
   }
 }
 

diff --git a/lib/utils/index.js b/lib/utils/index.js
@@ -30,15 +30,16 @@ export function getDefaultOptions (options) {
   }
 
   return Object.assign({
+    buildDir: null,
     name: MODULE_NAME,
     analyzer: false,
     modern: undefined,
     polyfill: false,
-    staticPath: null,
     entries: [],
-    shadow: false,
+    shadow: false
+  }, options, {
     webpackOutput: Object.assign(webpackOutputOptions, options.webpackOutput)
-  }, options)
+  })
 }
 
 /**
@@ -83,18 +84,27 @@ export function generateEntries (nuxt, options) {
   })
 }
 
-export async function initDist (nuxt, options) {
+export async function onBuildDone (nuxt, options) {
+  if (options.buildDir) {
+    await fsExtra.copy(getBuildDir(nuxt), options.buildDir)
+    consola.info(`Custom-Elements output directory: ${options.buildDir}`)
+    consola.success('Generated Custom-Elements!')
+  }
+}
+
+export async function onGeneratedDone (nuxt, options) {
   const buildDir = getBuildDir(nuxt)
-  const distPath = getDistDir(nuxt)
+  let distPath = getDistDir(nuxt)
 
   // Clean destination folder
-  await fsExtra.remove(distPath)
-
-  // Copy static and built files
-  if ('staticPath' in options && await fsExtra.exists(options.staticPath)) {
-    await fsExtra.copy(options.staticPath, distPath)
+  if (options.buildDir) {
+    distPath = options.buildDir
   }
+
+  await fsExtra.remove(distPath)
   await fsExtra.copy(buildDir, distPath)
+  consola.info(`Custom-Elements output directory: ${distPath}`)
+  consola.success('Generated Custom-Elements')
 }
 
 export function getEntryNamingMap (options) {

diff --git a/test/browser.test.js b/test/browser.test.js
@@ -1,11 +1,11 @@
-const { join, resolve } = require('path')
+const { resolve } = require('path')
+const fsExtra = require('fs-extra')
 const { pathExists } = require('fs-extra')
 const puppeteer = require('puppeteer')
-const { setup, loadConfig, generatePort } = require('@nuxtjs/module-test-utils')
+const { build, loadConfig, generatePort } = require('@nuxtjs/module-test-utils')
 
-// const nuxtConfig = require('./fixture/nuxt.config')
+const { startStaticServer, getUrl, getBuildDir, getCustomElementsDir, getGeneratesDir, getDistDir } = require('./utils')
 const moduleConfig = require('./fixture/module.config')
-const { startStaticServer, getUrl } = require('./fixture/utils')
 
 jest.setTimeout(10000)
 
@@ -16,12 +16,13 @@ const VIEWPORT = {
 
 describe('browser (only client) (puppeteer)', () => {
   let nuxt, express, browser, page
-  const fixtureDir = resolve(__dirname, 'fixture', 'browser', 'client')
-  const buildDir = join(fixtureDir, '.nuxt')
-  const customElementsDir = join(buildDir, 'nuxt-custom-elements/dist')
+  const generatesDir = getGeneratesDir('browser', 'client')
+  const buildDir = getBuildDir(generatesDir)
+  const customElementsDir = getCustomElementsDir(generatesDir, false, false)
 
   beforeAll(async () => {
     const overrides = {
+      modern: 'client',
       buildDir,
       modules: [
         [
@@ -30,9 +31,11 @@ describe('browser (only client) (puppeteer)', () => {
           })
         ]
       ]
-    };
+    }
 
-    ({ nuxt } = (await setup(loadConfig(__dirname, '.', overrides, { merge: true }))))
+    await fsExtra.remove(getDistDir(generatesDir));
+
+    ({ nuxt } = (await build(loadConfig(__dirname, '.', overrides, { merge: true }))))
     await nuxt.close()
 
     express = startStaticServer(customElementsDir, await generatePort())
@@ -66,12 +69,13 @@ describe('browser (only client) (puppeteer)', () => {
 
 describe('browser (client & modern) (puppeteer)', () => {
   let nuxt, express, browser, page
-  const fixtureDir = resolve(__dirname, 'fixture', 'browser', 'modern')
-  const buildDir = join(fixtureDir, '.nuxt')
-  const customElementsDir = join(buildDir, 'nuxt-custom-elements/dist')
+  const generatesDir = getGeneratesDir('browser', 'modern')
+  const buildDir = getBuildDir(generatesDir)
+  const customElementsDir = getCustomElementsDir(generatesDir, false, false)
 
   beforeAll(async () => {
     const overrides = {
+      modern: 'client',
       buildDir,
       modules: [
         [
@@ -80,9 +84,11 @@ describe('browser (client & modern) (puppeteer)', () => {
           })
         ]
       ]
-    };
+    }
+
+    await fsExtra.remove(getDistDir(generatesDir));
 
-    ({ nuxt } = (await setup(loadConfig(__dirname, '.', overrides, { merge: true }))))
+    ({ nuxt } = (await build(loadConfig(__dirname, '.', overrides, { merge: true }))))
     await nuxt.close()
 
     express = startStaticServer(customElementsDir, await generatePort())

diff --git a/test/fixture/module.config.js b/test/fixture/module.config.js
@@ -1,10 +1,6 @@
-import { resolve } from 'upath'
-
 module.exports = {
   analyzer: false,
-  modern: true,
   polyfill: true,
-  staticPath: resolve(__dirname, '../example/custom-element/static'),
   entries: [
     {
       name: 'ComponentAppAbstract',

diff --git a/test/fixture/nuxt.config.js b/test/fixture/nuxt.config.js
@@ -4,9 +4,6 @@ const repository = require('../../package.json').repository
 
 module.exports = {
 
-  mode: 'spa',
-  modern: 'client',
-
   rootDir: resolve(__dirname, '..'),
   srcDir: resolve(__dirname, '../../example'),
 

diff --git a/test/fixture/utils.js b/test/fixture/utils.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,3 +10,4 @@ node_modules @@
     coverage
     dist
     reports
+    test/generates