diff --git a/.gitignore b/.gitignore index cdd4dc841..6b4100a11 100644 --- a/.gitignore +++ b/.gitignore @@ -4,8 +4,9 @@ docs/assets/dist docs/assets/data/custom.json dist/ -www/ loader/ +website/ +www/ *~ *.sw[mnpcod] diff --git a/serve.js b/dev-server.js similarity index 69% rename from serve.js rename to dev-server.js index aba6eaf56..d1a13c4f1 100644 --- a/serve.js +++ b/dev-server.js @@ -1,20 +1,17 @@ // -// Launches an Express app that: +// The Shoelace dev server! 👟 // -// - Proxies Stencil's dev server (for HMR) +// This is an Express + Browsersync script that: +// +// - Proxies Stencil's dev server (for HMR of components) // - Serves dist/ and docs/ from https://localhost:3000/ -// - Launches the Docsify site that reloads when the docs are modified +// - Launches the docs site and reloads the page when pages are modified // // Usage: // -// 1. Launch Stencil: `stencil build --dev --docs --watch --serve --no-open` +// 1. Run Stencil: `stencil build --dev --docs --watch --serve --no-open` // -// 2. Launch this script. -// -// Result: -// -// - Changes to components will hot reload -// - Changes to docs will refresh +// 2. Run this script at the same time as Stencil // const bs = require('browser-sync').create(); @@ -38,24 +35,20 @@ app.use( }) ); -// Inject the dev server iframe into index.html +// Inject Stencil's dev server iframe into index.html app.use(/^\/(index.html)?$/, async (req, res, next) => { let index = await fs.readFile('./docs/index.html', 'utf8'); index = index.replace( '', - ` - - - ` + '' ); res.type('html').send(index); }); - app.use('/dist', express.static('./dist')); app.use('/', express.static('./docs')); app.listen(proxyPort); -// Give the dev server a few seconds to spin up, then launch the browser +// Give Stencil's dev server a few seconds to spin up, then launch the browser setTimeout(() => { console.log(chalk.cyan(`\nLaunching the Shoelace dev server at http://localhost:${browserPort}! 👟\n`)); diff --git a/package.json b/package.json index c80b34f6f..1fb3930f7 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,15 @@ "loader/" ], "scripts": { - "start": "concurrently --kill-others \"npm run dev\" \"node serve.js\"", + "start": "concurrently --kill-others \"npm run dev\" \"npm run serve\"", "dev": "stencil build --dev --docs --watch --serve --port 3333 --no-open", "build": "stencil build --docs", "lint": "eslint src/**/*{.ts,.tsx}", "test": "stencil test --spec --e2e", "test.watch": "stencil test --spec --e2e --watchAll", "generate": "stencil generate", + "serve": "node dev-server.js", + "postbuild": "node postbuild.js", "postinstall": "node postinstall.js" }, "devDependencies": { diff --git a/postbuild.js b/postbuild.js new file mode 100644 index 000000000..cbb3cdc0e --- /dev/null +++ b/postbuild.js @@ -0,0 +1,18 @@ +const chalk = require('chalk'); +const copy = require('recursive-copy'); +const del = require('del'); + +// +// Create the website folder +// +(async () => { + console.log(chalk.cyan('Creating website distribution 📚\n')); + + try { + await del('./website'); + + await Promise.all([copy('./docs', './website'), copy('./dist', './website/dist')]); + } catch (err) { + console.error(err); + } +})(); diff --git a/postinstall.js b/postinstall.js index 32d3e659e..811f97ebe 100644 --- a/postinstall.js +++ b/postinstall.js @@ -1,3 +1,4 @@ +const chalk = require('chalk'); const copy = require('recursive-copy'); const del = require('del'); @@ -6,6 +7,8 @@ const del = require('del'); // (async () => { try { + console.log(chalk.cyan('Copying icons 📦\n')); + await del('./src/components/icon/icons'); await Promise.all([