From fd619e4431bcec007cf7ee458ab0920d446095fe Mon Sep 17 00:00:00 2001 From: Manu MA Date: Thu, 30 Jun 2022 23:34:23 +0100 Subject: [PATCH] fix: vite prod (#705) --- package.json | 2 +- packages/create-qwik/package.json | 2 +- packages/docs/src/components/repl/repl.css | 7 ++++ .../docs/src/layouts/examples/examples.css | 6 ---- packages/eslint-plugin-qwik/package.json | 2 +- packages/qwik/package.json | 18 ++++------ packages/qwik/src/optimizer/src/manifest.ts | 4 --- .../qwik/src/optimizer/src/plugins/plugin.ts | 6 ++-- .../qwik/src/optimizer/src/plugins/rollup.ts | 1 - .../qwik/src/optimizer/src/plugins/vite.ts | 35 +++++++++++++++--- .../src/optimizer/src/plugins/vite.unit.ts | 36 +++++++++++++------ scripts/cli.ts | 6 ++-- scripts/eslint.ts | 4 +-- scripts/package-json.ts | 20 +++++------ scripts/submodule-core.ts | 5 +-- scripts/submodule-jsx-runtime.ts | 4 +-- scripts/util.ts | 8 ++--- scripts/validate-build.ts | 33 ++++++++--------- 18 files changed, 113 insertions(+), 86 deletions(-) diff --git a/package.json b/package.json index e3832263e10..dd69c08f4ad 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "qwik-monorepo", - "version": "0.0.33", + "version": "0.0.34", "scripts": { "build": "yarn node scripts --tsc --build --api --platform-binding-wasm-copy", "build.full": "yarn node scripts --tsc --build --api --eslint --qwikcity --qwikreact --platform-binding --wasm", diff --git a/packages/create-qwik/package.json b/packages/create-qwik/package.json index 878f8d550a8..45d6a727215 100644 --- a/packages/create-qwik/package.json +++ b/packages/create-qwik/package.json @@ -1,6 +1,6 @@ { "name": "create-qwik", - "version": "0.0.33", + "version": "0.0.34", "description": "Interactive CLI and API for generating Qwik projects.", "bin": "create-qwik", "main": "index.js", diff --git a/packages/docs/src/components/repl/repl.css b/packages/docs/src/components/repl/repl.css index a10efb01193..f7a87ca9fbf 100644 --- a/packages/docs/src/components/repl/repl.css +++ b/packages/docs/src/components/repl/repl.css @@ -359,6 +359,7 @@ flex: 1; padding: 5px; line-break: anywhere; + white-space: pre-wrap; } .line.paused, @@ -386,3 +387,9 @@ height: max-content; margin: 0 5px; } + +.detail-logs { + height: 100%; + overflow: auto; + padding-bottom: 100px; +} diff --git a/packages/docs/src/layouts/examples/examples.css b/packages/docs/src/layouts/examples/examples.css index 4934f6b23a2..f79593b6e89 100644 --- a/packages/docs/src/layouts/examples/examples.css +++ b/packages/docs/src/layouts/examples/examples.css @@ -175,9 +175,3 @@ font-size: 14px; margin-top: 40px; } - -.examples .detail-logs { - height: 100%; - overflow: auto; - padding-bottom: 100px; -} diff --git a/packages/eslint-plugin-qwik/package.json b/packages/eslint-plugin-qwik/package.json index d03e677675b..8c6759c5bd1 100644 --- a/packages/eslint-plugin-qwik/package.json +++ b/packages/eslint-plugin-qwik/package.json @@ -1,6 +1,6 @@ { "name": "eslint-plugin-qwik", - "version": "0.0.33", + "version": "0.0.34", "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.", "main": "index.js", "author": "Builder Team", diff --git a/packages/qwik/package.json b/packages/qwik/package.json index 2d18d52bf5f..96331c546ab 100644 --- a/packages/qwik/package.json +++ b/packages/qwik/package.json @@ -1,35 +1,29 @@ { "name": "@builder.io/qwik", - "version": "0.0.33", + "version": "0.0.34", "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.", "main": "./dist/core.cjs", - "module": "./dist/core.mjs", "types": "./dist/core.d.ts", "type": "module", "sideEffects": false, "exports": { ".": { + "production": "./dist/core.min.mjs", "import": "./dist/core.mjs", "require": "./dist/core.cjs" }, - "./core": { - "import": "./dist/core.mjs", - "require": "./dist/core.cjs" - }, - "./core.cjs": "./dist/core.cjs", - "./core.mjs": "./dist/core.mjs", "./jsx-runtime": { "import": "./dist/jsx-runtime.mjs", "require": "./dist/jsx-runtime.cjs" }, - "./build": { - "import": "./dist/build/index.mjs", - "require": "./dist/build/index.cjs" - }, "./jsx-dev-runtime": { "import": "./dist/jsx-runtime.mjs", "require": "./dist/jsx-runtime.cjs" }, + "./build": { + "import": "./dist/build/index.mjs", + "require": "./dist/build/index.cjs" + }, "./loader": { "import": "./dist/loader/index.mjs", "require": "./dist/loader/index.cjs" diff --git a/packages/qwik/src/optimizer/src/manifest.ts b/packages/qwik/src/optimizer/src/manifest.ts index a578a15d5ac..ed6121f8e30 100644 --- a/packages/qwik/src/optimizer/src/manifest.ts +++ b/packages/qwik/src/optimizer/src/manifest.ts @@ -211,10 +211,6 @@ function updateSortAndPriorities(manifest: QwikManifest) { manifest.mapping = prioritorizedMapping; manifest.bundles = sortedBundles; - if (Array.isArray(manifest.injections)) { - manifest.injections.sort(); - } - return manifest; } diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.ts b/packages/qwik/src/optimizer/src/plugins/plugin.ts index d1359ed359e..cf8b27f11c7 100644 --- a/packages/qwik/src/optimizer/src/plugins/plugin.ts +++ b/packages/qwik/src/optimizer/src/plugins/plugin.ts @@ -23,7 +23,6 @@ export interface QwikPackages { export function createPlugin(optimizerOptions: OptimizerOptions = {}) { const id = `${Math.round(Math.random() * 899) + 100}`; const results = new Map(); - const injections: GlobalInjections[] = []; const transformedOutputs = new Map(); let internalOptimizer: Optimizer | null = null; @@ -506,9 +505,10 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { const createOutputAnalyzer = () => { const outputBundles: GeneratedOutputBundle[] = []; + const injections: GlobalInjections[] = []; const addBundle = (b: GeneratedOutputBundle) => outputBundles.push(b); - + const addInjection = (b: GlobalInjections) => injections.push(b); const generateManifest = async () => { const optimizer = getOptimizer(); const path = optimizer.sys.path; @@ -521,7 +521,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { return generateManifestFromBundles(path, hooks, injections, outputBundles, opts); }; - return { addBundle, generateManifest }; + return { addBundle, addInjection, generateManifest }; }; const getOptions = () => opts; diff --git a/packages/qwik/src/optimizer/src/plugins/rollup.ts b/packages/qwik/src/optimizer/src/plugins/rollup.ts index 5dd0dd33131..742262e614f 100644 --- a/packages/qwik/src/optimizer/src/plugins/rollup.ts +++ b/packages/qwik/src/optimizer/src/plugins/rollup.ts @@ -178,7 +178,6 @@ export function normalizeRollupOutputOptions( rollupOutputOpts: OutputOptions ) { const outputOpts: OutputOptions = { - minifyInternalExports: false, ...rollupOutputOpts, }; diff --git a/packages/qwik/src/optimizer/src/plugins/vite.ts b/packages/qwik/src/optimizer/src/plugins/vite.ts index 0cf0deb3608..326f8b83382 100644 --- a/packages/qwik/src/optimizer/src/plugins/vite.ts +++ b/packages/qwik/src/optimizer/src/plugins/vite.ts @@ -1,6 +1,7 @@ import type { Plugin as VitePlugin, UserConfig, ViteDevServer } from 'vite'; import type { EntryStrategy, + GlobalInjections, OptimizerOptions, OptimizerSystem, QwikManifest, @@ -15,18 +16,16 @@ import { QwikPluginOptions, QwikBuildTarget, QWIK_CORE_ID, - QWIK_JSX_RUNTIME_ID, Q_MANIFEST_FILENAME, QWIK_CLIENT_MANIFEST_ID, QWIK_BUILD_ID, QwikPackages, + QWIK_JSX_RUNTIME_ID, } from './plugin'; import { createRollupError, normalizeRollupOutputOptions } from './rollup'; import { QWIK_LOADER_DEFAULT_DEBUG, QWIK_LOADER_DEFAULT_MINIFIED } from '../scripts'; import { versions } from '../versions'; -const OPTIMIZE_DEPS = [QWIK_CORE_ID, QWIK_JSX_RUNTIME_ID]; - const DEDUPE = [QWIK_CORE_ID, QWIK_JSX_RUNTIME_ID]; /** @@ -37,6 +36,7 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any { let clientDevInput: undefined | string = undefined; let tmpClientManifestPath: undefined | string = undefined; let viteCommand: 'build' | 'serve' = 'serve'; + const injections: GlobalInjections[] = []; const qwikPlugin = createPlugin(qwikViteOpts.optimizerOptions); const vitePlugin: VitePlugin = { @@ -189,15 +189,15 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any { const vendorIds = vendorRoots.map((v) => v.id); const updatedViteConfig: UserConfig = { - esbuild: false, resolve: { dedupe: [...DEDUPE, ...vendorIds], }, optimizeDeps: { - include: OPTIMIZE_DEPS, exclude: [ '@vite/client', '@vite/env', + QWIK_CORE_ID, + QWIK_JSX_RUNTIME_ID, QWIK_BUILD_ID, QWIK_CLIENT_MANIFEST_ID, ...vendorIds, @@ -239,6 +239,15 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any { } as any; } } else if (opts.target === 'client') { + if (buildMode === 'production') { + updatedViteConfig.resolve!.conditions = [ + 'production', + 'import', + 'module', + 'browser', + 'default', + ]; + } // Client Build if (isClientDevOnly) { updatedViteConfig.build!.rollupOptions!.input = clientDevInput; @@ -327,9 +336,24 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any { dynamicImports: b.dynamicImports, size: b.code.length, }); + } else { + if (fileName.endsWith('.css')) { + injections.push({ + tag: 'link', + location: 'head', + attributes: { + rel: 'stylesheet', + href: `/${fileName}`, + }, + }); + } } } + for (const i of injections) { + outputAnalyzer.addInjection(i); + } + const optimizer = qwikPlugin.getOptimizer(); const manifest = await outputAnalyzer.generateManifest(); manifest.platform = { @@ -442,6 +466,7 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any { if (hook) { manifest.mapping[hook.name] = url; } + const { pathId, query } = parseId(v.url); if (query === '' && pathId.endsWith('.css')) { manifest.injections!.push({ diff --git a/packages/qwik/src/optimizer/src/plugins/vite.unit.ts b/packages/qwik/src/optimizer/src/plugins/vite.unit.ts index 5b8a07811bc..0d38b4e5891 100644 --- a/packages/qwik/src/optimizer/src/plugins/vite.unit.ts +++ b/packages/qwik/src/optimizer/src/plugins/vite.unit.ts @@ -14,7 +14,15 @@ describe('vite plugin', () => { }; }); - const deps = ['@builder.io/qwik', '@builder.io/qwik/jsx-runtime']; + const includeDeps = undefined; + const excludeDeps = [ + '@vite/client', + '@vite/env', + '@builder.io/qwik', + '@builder.io/qwik/jsx-runtime', + '@builder.io/qwik/build', + '@qwik-client-manifest', + ]; describe('config', () => { it('command: serve, mode: development', async () => { @@ -40,8 +48,10 @@ describe('vite plugin', () => { expect(build.polyfillModulePreload).toBe(false); expect(build.dynamicImportVarsOptions?.exclude).toEqual([/./]); expect(build.ssr).toBe(undefined); - expect(c.optimizeDeps?.include).toEqual(deps); - expect(c.esbuild).toEqual(false); + expect(c.optimizeDeps?.include).toEqual(includeDeps); + expect(c.optimizeDeps?.exclude).toEqual(excludeDeps); + + expect(c.esbuild).toEqual(undefined); expect((c as any).ssr).toBeUndefined(); }); @@ -68,8 +78,9 @@ describe('vite plugin', () => { expect(build.polyfillModulePreload).toBe(false); expect(build.dynamicImportVarsOptions?.exclude).toEqual([/./]); expect(build.ssr).toBe(undefined); - expect(c.optimizeDeps?.include).toEqual(deps); - expect(c.esbuild).toEqual(false); + expect(c.optimizeDeps?.include).toEqual(includeDeps); + expect(c.optimizeDeps?.exclude).toEqual(excludeDeps); + expect(c.esbuild).toEqual(undefined); expect((c as any).ssr).toBeUndefined(); }); it('command: build, mode: development', async () => { @@ -95,8 +106,9 @@ describe('vite plugin', () => { expect(build.polyfillModulePreload).toBe(false); expect(build.dynamicImportVarsOptions?.exclude).toEqual([/./]); expect(build.ssr).toBe(undefined); - expect(c.optimizeDeps?.include).toEqual(deps); - expect(c.esbuild).toEqual(false); + expect(c.optimizeDeps?.include).toEqual(includeDeps); + expect(c.optimizeDeps?.exclude).toEqual(excludeDeps); + expect(c.esbuild).toEqual(undefined); expect((c as any).ssr).toBeUndefined(); }); @@ -124,8 +136,9 @@ describe('vite plugin', () => { expect(build.polyfillModulePreload).toBe(false); expect(build.dynamicImportVarsOptions?.exclude).toEqual([/./]); expect(build.ssr).toBe(undefined); - expect(c.optimizeDeps?.include).toEqual(deps); - expect(c.esbuild).toEqual(false); + expect(c.optimizeDeps?.include).toEqual(includeDeps); + expect(c.optimizeDeps?.exclude).toEqual(excludeDeps); + expect(c.esbuild).toEqual(undefined); expect((c as any).ssr).toBeUndefined(); }); @@ -173,8 +186,9 @@ describe('vite plugin', () => { expect(build.polyfillModulePreload).toBe(false); expect(build.dynamicImportVarsOptions?.exclude).toEqual([/./]); expect(build.ssr).toBe(true); - expect(c.optimizeDeps?.include).toEqual(deps); - expect(c.esbuild).toEqual(false); + expect(c.optimizeDeps?.include).toEqual(includeDeps); + expect(c.optimizeDeps?.exclude).toEqual(excludeDeps); + expect(c.esbuild).toEqual(undefined); expect(c.publicDir).toBe(false); }); diff --git a/scripts/cli.ts b/scripts/cli.ts index 79b10eace04..9cc73bbe725 100644 --- a/scripts/cli.ts +++ b/scripts/cli.ts @@ -1,4 +1,4 @@ -import { BuildConfig, copyFile, emptyDir, importPath, mkdir, stat } from './util'; +import { BuildConfig, copyFile, emptyDir, importPath, mkdir, nodeTarget, stat } from './util'; import { build } from 'esbuild'; import { basename, join } from 'path'; import { getBanner, readdir, watcher, run } from './util'; @@ -38,7 +38,7 @@ async function bundleCli(config: BuildConfig, srcCliDir: string, distCliDir: str outfile: join(distCliDir, PACKAGE), bundle: true, sourcemap: false, - target: 'node10', + target: nodeTarget, platform: 'node', minify: !config.dev, plugins: [importPath(/api$/, './index.js')], @@ -53,7 +53,7 @@ async function bundleCli(config: BuildConfig, srcCliDir: string, distCliDir: str outfile: join(distCliDir, 'index.js'), bundle: true, sourcemap: false, - target: 'node10', + target: 'node14', platform: 'node', minify: !config.dev, banner: { diff --git a/scripts/eslint.ts b/scripts/eslint.ts index 184f59c1726..03a8274f5e4 100644 --- a/scripts/eslint.ts +++ b/scripts/eslint.ts @@ -1,4 +1,4 @@ -import { BuildConfig, copyFile, watcher, run } from './util'; +import { BuildConfig, copyFile, watcher, run, nodeTarget } from './util'; import { join } from 'path'; import { build } from 'esbuild'; import { readPackageJson, writePackageJson } from './package-json'; @@ -14,7 +14,7 @@ export async function buildEslint(config: BuildConfig) { outfile: join(eslintOutput, 'index.js'), bundle: true, sourcemap: false, - target: 'node10', + target: nodeTarget, platform: 'node', minify: !config.dev, watch: watcher(config), diff --git a/scripts/package-json.ts b/scripts/package-json.ts index 423cb5d4366..e646ed55202 100644 --- a/scripts/package-json.ts +++ b/scripts/package-json.ts @@ -16,32 +16,28 @@ export async function generatePackageJson(config: BuildConfig) { description: rootPkg.description, license: rootPkg.license, main: './core.cjs', - module: './core.mjs', types: './core.d.ts', type: 'module', exports: { '.': { - import: './core.mjs', + import: { + production: './core.min.mjs', + default: './core.mjs', + }, require: './core.cjs', }, - './core': { - import: './core.mjs', - require: './core.cjs', - }, - './core.cjs': './core.cjs', - './core.mjs': './core.mjs', './jsx-runtime': { import: './jsx-runtime.mjs', require: './jsx-runtime.cjs', }, - './build': { - import: './build/index.mjs', - require: './build/index.cjs', - }, './jsx-dev-runtime': { import: './jsx-runtime.mjs', require: './jsx-runtime.cjs', }, + './build': { + import: './build/index.mjs', + require: './build/index.cjs', + }, './loader': { import: './loader/index.mjs', require: './loader/index.cjs', diff --git a/scripts/submodule-core.ts b/scripts/submodule-core.ts index 4097141fe3d..d6301756bac 100644 --- a/scripts/submodule-core.ts +++ b/scripts/submodule-core.ts @@ -83,9 +83,10 @@ async function submoduleCoreProd(config: BuildConfig) { // developer production builds could use core.min.js directly, or setup // their own build tools to define the globa `qwikDev` to false 'globalThis.qDev': false, + 'globalThis.describe': false, 'globalThis.QWIK_VERSION': JSON.stringify(config.distVersion), }, - ecma: 2019, + ecma: 2020, passes: 3, }, mangle: { @@ -98,7 +99,7 @@ async function submoduleCoreProd(config: BuildConfig) { comments: /__PURE__/, preserve_annotations: true, preamble: getBanner('@builder.io/qwik'), - ecma: 2019, + ecma: 2020, }, }); diff --git a/scripts/submodule-jsx-runtime.ts b/scripts/submodule-jsx-runtime.ts index a23911c8d9d..51c070cfe81 100644 --- a/scripts/submodule-jsx-runtime.ts +++ b/scripts/submodule-jsx-runtime.ts @@ -29,7 +29,7 @@ export async function submoduleJsxRuntime(config: BuildConfig) { ...opts, format: 'esm', outExtension: { '.js': '.mjs' }, - plugins: [importPath(/^@builder\.io\/qwik$/, './core.mjs')], + plugins: [importPath(/^@builder\.io\/qwik$/, '@builder.io/qwik')], watch: watcher(config, submodule), }); @@ -37,7 +37,7 @@ export async function submoduleJsxRuntime(config: BuildConfig) { ...opts, format: 'cjs', outExtension: { '.js': '.cjs' }, - plugins: [importPath(/^@builder\.io\/qwik$/, './core.cjs')], + plugins: [importPath(/^@builder\.io\/qwik$/, '@builder.io/qwik')], watch: watcher(config), }); diff --git a/scripts/util.ts b/scripts/util.ts index 0262dcfefb9..a64ace26013 100644 --- a/scripts/util.ts +++ b/scripts/util.ts @@ -161,9 +161,9 @@ export const getBanner = (moduleName: string) => { * The JavaScript target we're going for. Reusing a constant just to make sure * all the builds are using the same target. */ -export const target = 'es2018'; +export const target = 'es2020'; -export const nodeTarget = 'node10'; +export const nodeTarget = 'node14'; /** * Helper just to know which NodeJS modules that should stay external. @@ -309,11 +309,11 @@ export interface PackageJSON { scripts?: { [scriptName: string]: string }; license?: string; main: string; - module: string; + module?: string; types: string; type?: string; files?: string[]; - exports?: { [key: string]: string | { [key: string]: string } }; + exports?: { [key: string]: any }; contributors?: { [key: string]: string }[]; homepage?: string; repository?: { [key: string]: string }; diff --git a/scripts/validate-build.ts b/scripts/validate-build.ts index 87b8e74f797..9ee55c6cfda 100644 --- a/scripts/validate-build.ts +++ b/scripts/validate-build.ts @@ -151,21 +151,22 @@ async function validatePackageJson(config: BuildConfig, pkg: PackageJSON, errors } } - await Promise.all([validatePath(pkg.main), validatePath(pkg.module), validatePath(pkg.types)]); - - const exportKeys = Object.keys(pkg.exports!); - - await Promise.all( - exportKeys.map(async (exportKey) => { - const val = pkg.exports![exportKey]; - if (typeof val === 'string') { - await validatePath(val); - } else { - const exportKeys = Object.keys(val); - for (const key of exportKeys) { - await validatePath(val[key]); + await Promise.all([validatePath(pkg.main), validatePath(pkg.types)]); + + async function validateExports(exports: Record) { + const exportKeys = Object.keys(exports); + + await Promise.all( + exportKeys.map(async (exportKey) => { + const val = exports[exportKey]; + if (typeof val === 'string') { + await validatePath(val); + } else { + await validateExports(val); } - } - }) - ); + }) + ); + } + + validateExports(pkg.exports!); }