From b7b8c1cf4d36a763546c935ee754bd9b04e2d113 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Wed, 17 Aug 2022 19:19:54 -0500 Subject: [PATCH] refactor: Closer but still a bunch of issues --- packages/cli/lib/lib/babel-config.js | 1 + packages/cli/lib/lib/webpack/prerender.js | 2 +- .../cli/lib/lib/webpack/render-html-plugin.js | 2 +- .../lib/lib/webpack/webpack-client-config.js | 14 +++---------- packages/cli/package.json | 1 + .../tests/subjects/preload-modern/index.js | 21 +++++++++++++++++++ .../subjects/preload-modern/package.json | 4 ++++ .../subjects/preload-modern/preact.config.js | 6 ++++++ .../subjects/preload-modern/routes/home.css | 3 +++ .../subjects/preload-modern/routes/home.js | 8 +++++++ .../preload-modern/routes/route66.css | 3 +++ .../subjects/preload-modern/routes/route66.js | 8 +++++++ .../preload-modern/routes/route89.css | 3 +++ .../subjects/preload-modern/routes/route89.js | 8 +++++++ .../tests/subjects/preload-modern/style.css | 3 +++ .../tests/subjects/preload-modern/useBase.js | 6 ++++++ packages/create-cli/lib/commands/create.js | 6 ++++-- yarn.lock | 5 +++++ 18 files changed, 89 insertions(+), 15 deletions(-) create mode 100644 packages/cli/tests/subjects/preload-modern/index.js create mode 100644 packages/cli/tests/subjects/preload-modern/package.json create mode 100644 packages/cli/tests/subjects/preload-modern/preact.config.js create mode 100644 packages/cli/tests/subjects/preload-modern/routes/home.css create mode 100644 packages/cli/tests/subjects/preload-modern/routes/home.js create mode 100644 packages/cli/tests/subjects/preload-modern/routes/route66.css create mode 100644 packages/cli/tests/subjects/preload-modern/routes/route66.js create mode 100644 packages/cli/tests/subjects/preload-modern/routes/route89.css create mode 100644 packages/cli/tests/subjects/preload-modern/routes/route89.js create mode 100644 packages/cli/tests/subjects/preload-modern/style.css create mode 100644 packages/cli/tests/subjects/preload-modern/useBase.js diff --git a/packages/cli/lib/lib/babel-config.js b/packages/cli/lib/lib/babel-config.js index 5a4859787..9bc0eed4b 100644 --- a/packages/cli/lib/lib/babel-config.js +++ b/packages/cli/lib/lib/babel-config.js @@ -25,6 +25,7 @@ module.exports = function (env) { ], ].filter(Boolean), plugins: [ + require.resolve('@rschristian/babel-plugin-webpack-chunk-name-comments'), [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], isProd && require.resolve('babel-plugin-transform-react-remove-prop-types'), diff --git a/packages/cli/lib/lib/webpack/prerender.js b/packages/cli/lib/lib/webpack/prerender.js index df6a8289b..63f4df9ec 100644 --- a/packages/cli/lib/lib/webpack/prerender.js +++ b/packages/cli/lib/lib/webpack/prerender.js @@ -26,7 +26,7 @@ module.exports = async function (env, params) { ); return ''; } - return await prerender(app, { ...params, url }); + return (await prerender(app, { ...params, url })).html; } catch (err) { let stack = stackTrace.parse(err).filter(s => s.getFileName() === entry)[0]; if (!stack) { diff --git a/packages/cli/lib/lib/webpack/render-html-plugin.js b/packages/cli/lib/lib/webpack/render-html-plugin.js index dbb570356..772bfed18 100644 --- a/packages/cli/lib/lib/webpack/render-html-plugin.js +++ b/packages/cli/lib/lib/webpack/render-html-plugin.js @@ -92,7 +92,7 @@ module.exports = async function renderHTMLPlugin(config) { preRenderData: values, CLI_DATA: { preRenderData: { url, ...routeData } }, ssr: config.prerender - ? (await prerender({ cwd, dest, src }, values)).html + ? await prerender({ cwd, dest, src }, values) : '', entrypoints, }, diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js index d9c2f89f2..318e8bdef 100644 --- a/packages/cli/lib/lib/webpack/webpack-client-config.js +++ b/packages/cli/lib/lib/webpack/webpack-client-config.js @@ -23,10 +23,6 @@ const cleanFilename = name => '' ); -// TODO: Swap with the above when removing the async loader -const cleanFilename2 = name => - (name = name.replace(/_/g, '-').replace(/(-index|-[jt]sx?$)/, '')); - /** * @returns {Promise} */ @@ -91,12 +87,9 @@ async function clientConfig(env) { } return env.isProd ? '[name].[chunkhash:5].js' : '[name].js'; }, - chunkFilename: pathData => { - const chunkName = cleanFilename2(pathData.chunk.id); - return env.isProd - ? `${chunkName}.chunk.[chunkhash:5].js` - : `${chunkName}.chunk.js`; - }, + chunkFilename: env.isProd + ? '[name].chunk.[chunkhash:5].js' + : '[name].chunk.js', }, resolveLoader: { @@ -180,7 +173,6 @@ function isProd(env) { cache: true, optimization: { - chunkIds: 'named', minimizer: [ new TerserPlugin({ extractComments: false, diff --git a/packages/cli/package.json b/packages/cli/package.json index 84adfdbf1..2f73a495e 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -81,6 +81,7 @@ "@preact/async-loader": "^3.0.1", "@prefresh/babel-plugin": "^0.4.1", "@prefresh/webpack": "^3.2.2", + "@rschristian/babel-plugin-webpack-chunk-name-comments": "^0.1.1", "@types/webpack": "^4.38.0", "autoprefixer": "^10.4.7", "babel-loader": "^8.2.5", diff --git a/packages/cli/tests/subjects/preload-modern/index.js b/packages/cli/tests/subjects/preload-modern/index.js new file mode 100644 index 000000000..ee720a85f --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/index.js @@ -0,0 +1,21 @@ +import { LocationProvider, Router } from 'preact-iso/router'; +import { default as lazy, ErrorBoundary } from 'preact-iso/lazy'; + +const Home = lazy(() => import('./routes/home.js')); +const Route66 = lazy(() => import('./routes/route66.js')); +const Route89 = lazy(() => import('./routes/route89.js')); +import './style.css'; + +export default function App() { + return ( + + + + + + + + + + ); +} diff --git a/packages/cli/tests/subjects/preload-modern/package.json b/packages/cli/tests/subjects/preload-modern/package.json new file mode 100644 index 000000000..e877bc349 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-preload-chunks" +} diff --git a/packages/cli/tests/subjects/preload-modern/preact.config.js b/packages/cli/tests/subjects/preload-modern/preact.config.js new file mode 100644 index 000000000..dc1f29b66 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/preact.config.js @@ -0,0 +1,6 @@ +module.exports = function (config, env, helpers) { + // TODO: clean up later, just removes the async loader + if (env.isProd && !env.isServer) { + config.module.rules.pop(); + } +}; diff --git a/packages/cli/tests/subjects/preload-modern/routes/home.css b/packages/cli/tests/subjects/preload-modern/routes/home.css new file mode 100644 index 000000000..9e3a76d5d --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/routes/home.css @@ -0,0 +1,3 @@ +.home { + background: red; +} diff --git a/packages/cli/tests/subjects/preload-modern/routes/home.js b/packages/cli/tests/subjects/preload-modern/routes/home.js new file mode 100644 index 000000000..e11315d97 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/routes/home.js @@ -0,0 +1,8 @@ +import { useBase } from '../useBase'; +import './home.css'; + +export default () => { + const base = useBase(); + + return
{base}Home
; +}; diff --git a/packages/cli/tests/subjects/preload-modern/routes/route66.css b/packages/cli/tests/subjects/preload-modern/routes/route66.css new file mode 100644 index 000000000..a67037cba --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/routes/route66.css @@ -0,0 +1,3 @@ +.route66 { + background: tomato; +} diff --git a/packages/cli/tests/subjects/preload-modern/routes/route66.js b/packages/cli/tests/subjects/preload-modern/routes/route66.js new file mode 100644 index 000000000..d6a67d0d5 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/routes/route66.js @@ -0,0 +1,8 @@ +import { useBase } from '../useBase'; +import './route66.css'; + +export default () => { + const base = useBase(); + + return
{base}route66
; +}; diff --git a/packages/cli/tests/subjects/preload-modern/routes/route89.css b/packages/cli/tests/subjects/preload-modern/routes/route89.css new file mode 100644 index 000000000..a67037cba --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/routes/route89.css @@ -0,0 +1,3 @@ +.route66 { + background: tomato; +} diff --git a/packages/cli/tests/subjects/preload-modern/routes/route89.js b/packages/cli/tests/subjects/preload-modern/routes/route89.js new file mode 100644 index 000000000..d8eb218d6 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/routes/route89.js @@ -0,0 +1,8 @@ +import { useBase } from '../useBase'; +import './route89.css'; + +export default () => { + const base = useBase(); + + return
{base}route89
; +}; diff --git a/packages/cli/tests/subjects/preload-modern/style.css b/packages/cli/tests/subjects/preload-modern/style.css new file mode 100644 index 000000000..9efb8d8f0 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/style.css @@ -0,0 +1,3 @@ +html { + padding: 0px; +} diff --git a/packages/cli/tests/subjects/preload-modern/useBase.js b/packages/cli/tests/subjects/preload-modern/useBase.js new file mode 100644 index 000000000..3bb58c1f0 --- /dev/null +++ b/packages/cli/tests/subjects/preload-modern/useBase.js @@ -0,0 +1,6 @@ +import { useState } from 'preact/hooks'; + +export function useBase() { + const [dummyState, _setDummyState] = useState(''); + return dummyState; +} diff --git a/packages/create-cli/lib/commands/create.js b/packages/create-cli/lib/commands/create.js index c8de27d92..d03fc8314 100644 --- a/packages/create-cli/lib/commands/create.js +++ b/packages/create-cli/lib/commands/create.js @@ -35,8 +35,10 @@ exports.create = async function create(repo, dest, argv) { if (!repo.includes('/')) { repo = `preactjs-templates/${repo}`; - // TODO: Remove this after updating all templates - if (repo.endsWith('default') || repo.endsWith('typescript')) { + // TODO: This is an awful hack but necessary to test with + if (repo.endsWith('default')) { + repo += '#experimental/preact-iso'; + } else if (repo.endsWith('typescript')) { repo += '#next'; } } diff --git a/yarn.lock b/yarn.lock index cbe3d0e2e..95d0479e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2640,6 +2640,11 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@rschristian/babel-plugin-webpack-chunk-name-comments@^0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@rschristian/babel-plugin-webpack-chunk-name-comments/-/babel-plugin-webpack-chunk-name-comments-0.1.1.tgz#8a3939eb2ee7578cc7e56ad99f0ba4af0adb8b13" + integrity sha512-m4W4X1hIAD/kWCAWV42bWmSDP4NnB6y7nlq5S3kl4JvaSXGtL7SAbd5Z7LxZItwhxIRbCON4Tz9Any676PMULA== + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"