diff --git a/package.json b/package.json index 981605c0913..21876dccea0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "qwik-monorepo", - "version": "0.0.24", + "version": "0.0.25", "scripts": { "build": "yarn node scripts --tsc --build --api --platform-binding-wasm-copy", "build.full": "yarn node scripts --tsc --build --api --eslint --qwikcity --platform-binding --wasm", diff --git a/packages/create-qwik/package.json b/packages/create-qwik/package.json index 86965cdde57..a89214cfd3d 100644 --- a/packages/create-qwik/package.json +++ b/packages/create-qwik/package.json @@ -1,6 +1,6 @@ { "name": "create-qwik", - "version": "0.0.24", + "version": "0.0.25", "description": "Interactive CLI and API for generating Qwik projects.", "bin": "create-qwik", "main": "index.js", diff --git a/packages/eslint-plugin-qwik/package.json b/packages/eslint-plugin-qwik/package.json index 889c1268272..ac95779ab88 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.24", + "version": "0.0.25", "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 f39983a71c0..3b4445118c5 100644 --- a/packages/qwik/package.json +++ b/packages/qwik/package.json @@ -1,6 +1,6 @@ { "name": "@builder.io/qwik", - "version": "0.0.24", + "version": "0.0.25", "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", diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.ts b/packages/qwik/src/optimizer/src/plugins/plugin.ts index a2ad33198fc..46884dbfffb 100644 --- a/packages/qwik/src/optimizer/src/plugins/plugin.ts +++ b/packages/qwik/src/optimizer/src/plugins/plugin.ts @@ -158,7 +158,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { opts.input = [path.resolve(srcDir, 'entry.ssr.tsx')]; } else { // client input default - opts.input = [path.resolve(srcDir, 'components', 'app', 'app.tsx')]; + opts.input = [path.resolve(srcDir, 'root.tsx')]; } } opts.input = opts.input.map((input) => { diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.unit.ts b/packages/qwik/src/optimizer/src/plugins/plugin.unit.ts index 95da4999026..5cb11649e0b 100644 --- a/packages/qwik/src/optimizer/src/plugins/plugin.unit.ts +++ b/packages/qwik/src/optimizer/src/plugins/plugin.unit.ts @@ -15,7 +15,7 @@ describe('qwik plugin', () => { expect(opts.forceFullBuild).toBe(false); expect(opts.debug).toBe(false); expect(opts.rootDir).toBe(cwd); - expect(opts.input).toEqual([resolve(cwd, 'src', 'components', 'app', 'app.tsx')]); + expect(opts.input).toEqual([resolve(cwd, 'src', 'root.tsx')]); expect(opts.outDir).toBe(resolve(cwd, 'dist')); expect(opts.manifestInput).toBe(null); expect(opts.manifestOutput).toBe(null); @@ -32,7 +32,7 @@ describe('qwik plugin', () => { expect(opts.forceFullBuild).toBe(true); expect(opts.debug).toBe(false); expect(opts.rootDir).toBe(cwd); - expect(opts.input).toEqual([resolve(cwd, 'src', 'components', 'app', 'app.tsx')]); + expect(opts.input).toEqual([resolve(cwd, 'src', 'root.tsx')]); expect(opts.outDir).toBe(resolve(cwd, 'dist')); expect(opts.manifestInput).toBe(null); expect(opts.manifestOutput).toBe(null); diff --git a/packages/qwik/src/optimizer/src/plugins/rollup.unit.ts b/packages/qwik/src/optimizer/src/plugins/rollup.unit.ts index f329ccd1c9f..340f21536ec 100644 --- a/packages/qwik/src/optimizer/src/plugins/rollup.unit.ts +++ b/packages/qwik/src/optimizer/src/plugins/rollup.unit.ts @@ -19,7 +19,7 @@ describe('rollup plugin', () => { const rollupInputOpts: InputOptions = await plugin.options!({}); expect(typeof rollupInputOpts.onwarn).toBe('function'); - expect(rollupInputOpts.input).toEqual([resolve(cwd, 'src', 'components', 'app', 'app.tsx')]); + expect(rollupInputOpts.input).toEqual([resolve(cwd, 'src', 'root.tsx')]); }); it('rollup default input options, ssr', async () => { diff --git a/packages/qwik/src/optimizer/src/plugins/vite.unit.ts b/packages/qwik/src/optimizer/src/plugins/vite.unit.ts index 077f22e4471..667f6d7684e 100644 --- a/packages/qwik/src/optimizer/src/plugins/vite.unit.ts +++ b/packages/qwik/src/optimizer/src/plugins/vite.unit.ts @@ -59,7 +59,7 @@ describe('vite plugin', () => { expect(plugin.enforce).toBe('pre'); expect(build.outDir).toBe(resolve(cwd, 'dist')); - expect(rollupOptions.input).toEqual([resolve(cwd, 'src', 'components', 'app', 'app.tsx')]); + expect(rollupOptions.input).toEqual([resolve(cwd, 'src', 'root.tsx')]); expect(outputOptions.assetFileNames).toBe('build/[name].[ext]'); expect(outputOptions.chunkFileNames).toBe('build/[name].js'); expect(outputOptions.entryFileNames).toBe('build/[name].js'); @@ -87,7 +87,7 @@ describe('vite plugin', () => { expect(plugin.enforce).toBe('pre'); expect(build.outDir).toBe(resolve(cwd, 'dist')); - expect(rollupOptions.input).toEqual([resolve(cwd, 'src', 'components', 'app', 'app.tsx')]); + expect(rollupOptions.input).toEqual([resolve(cwd, 'src', 'root.tsx')]); expect(outputOptions.assetFileNames).toBe('build/q-[hash].[ext]'); expect(outputOptions.chunkFileNames).toBe('build/q-[hash].js'); expect(outputOptions.entryFileNames).toBe('build/q-[hash].js'); @@ -113,7 +113,7 @@ describe('vite plugin', () => { expect(opts.target).toBe('client'); expect(opts.buildMode).toBe('production'); - expect(rollupOptions.input).toEqual([resolve(cwd, 'src', 'components', 'app', 'app.tsx')]); + expect(rollupOptions.input).toEqual([resolve(cwd, 'src', 'root.tsx')]); expect(build.outDir).toEqual(resolve(cwd, 'client-dist')); }); diff --git a/packages/qwik/src/server/api.md b/packages/qwik/src/server/api.md index 22999df59ba..242c9dc0abd 100644 --- a/packages/qwik/src/server/api.md +++ b/packages/qwik/src/server/api.md @@ -160,7 +160,7 @@ export function serializeDocument(docOrEl: Document | Element, opts?: SerializeD // Warning: (ae-forgotten-export) The symbol "SymbolMapper" needs to be exported by the entry point index.d.ts // // @public -export function setServerPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper): Promise; +export function setServerPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper | undefined): Promise; // @public (undocumented) export interface SnapshotResult { diff --git a/packages/qwik/src/server/platform.ts b/packages/qwik/src/server/platform.ts index 9643bfe2d12..3011f8a15a5 100644 --- a/packages/qwik/src/server/platform.ts +++ b/packages/qwik/src/server/platform.ts @@ -1,13 +1,18 @@ import type { CorePlatform } from '@builder.io/qwik'; import { setPlatform } from '@builder.io/qwik'; import { getSymbolHash } from '../core/import/qrl-class'; +import { logError } from '../core/util/log'; import type { SymbolMapper } from '../optimizer/src/types'; import type { SerializeDocumentOptions } from './types'; import { normalizeUrl } from './utils'; declare const require: (module: string) => Record; -function createPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper) { +function createPlatform( + document: any, + opts: SerializeDocumentOptions, + mapper: SymbolMapper | undefined +) { if (!document || (document as Document).nodeType !== 9) { throw new Error(`Invalid Document implementation`); } @@ -43,7 +48,14 @@ function createPlatform(document: any, opts: SerializeDocumentOptions, mapper: S }); }, chunkForSymbol(symbolName: string) { - return mapper[getSymbolHash(symbolName)]; + if (mapper) { + const hash = getSymbolHash(symbolName); + const result = mapper[hash]; + if (!result) { + logError('Cannot resolved symbol', symbolName, 'in', mapper); + } + return result; + } }, }; return serverPlatform; @@ -56,7 +68,7 @@ function createPlatform(document: any, opts: SerializeDocumentOptions, mapper: S export async function setServerPlatform( document: any, opts: SerializeDocumentOptions, - mapper: SymbolMapper + mapper: SymbolMapper | undefined ) { const platform = createPlatform(document, opts, mapper); setPlatform(document, platform); diff --git a/packages/qwik/src/server/prefetch-strategy.ts b/packages/qwik/src/server/prefetch-strategy.ts index 6d72b71962d..2cc25de64de 100644 --- a/packages/qwik/src/server/prefetch-strategy.ts +++ b/packages/qwik/src/server/prefetch-strategy.ts @@ -12,10 +12,10 @@ import type { SymbolMapper } from '../optimizer/src/types'; export function getPrefetchResources( snapshotResult: SnapshotResult | null, opts: RenderToStringOptions, - mapper: SymbolMapper + mapper: SymbolMapper | undefined ): PrefetchResource[] { const manifest = getValidManifest(opts.manifest); - if (manifest) { + if (manifest && mapper) { const prefetchStrategy = opts.prefetchStrategy; const buildBase = getBuildBase(opts); diff --git a/packages/qwik/src/server/render.ts b/packages/qwik/src/server/render.ts index c822010fcc3..cfcb5a58ed5 100644 --- a/packages/qwik/src/server/render.ts +++ b/packages/qwik/src/server/render.ts @@ -12,6 +12,7 @@ import { _createDocument } from './document'; import type { SymbolMapper } from '../optimizer/src/types'; import { getSymbolHash } from '../core/import/qrl-class'; import { isDocument } from '../core/util/element'; +import { logWarn } from '../core/util/log'; /** * Creates a server-side `document`, renders to root node to the document, @@ -36,6 +37,9 @@ export async function renderToString(rootNode: any, opts: RenderToStringOptions root = doc.createElement(opts.fragmentTagName); doc.body.appendChild(root); } + if (!opts.manifest) { + logWarn('Missing client manifest, loading symbols in the client might 404'); + } const isFullDocument = isDocument(root); const mapper = computeSymbolMapper(opts.manifest); await setServerPlatform(doc, opts, mapper); @@ -92,12 +96,13 @@ export async function renderToString(rootNode: any, opts: RenderToStringOptions return result; } -function computeSymbolMapper(manifest: QwikManifest | undefined): SymbolMapper { - const mapper: SymbolMapper = {}; +function computeSymbolMapper(manifest: QwikManifest | undefined): SymbolMapper | undefined { if (manifest) { + const mapper: SymbolMapper = {}; Object.entries(manifest.mapping).forEach(([key, value]) => { mapper[getSymbolHash(key)] = [key, value]; }); + return mapper; } - return mapper; + return undefined; } diff --git a/packages/qwik/src/testing/api.md b/packages/qwik/src/testing/api.md index 22999df59ba..242c9dc0abd 100644 --- a/packages/qwik/src/testing/api.md +++ b/packages/qwik/src/testing/api.md @@ -160,7 +160,7 @@ export function serializeDocument(docOrEl: Document | Element, opts?: SerializeD // Warning: (ae-forgotten-export) The symbol "SymbolMapper" needs to be exported by the entry point index.d.ts // // @public -export function setServerPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper): Promise; +export function setServerPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper | undefined): Promise; // @public (undocumented) export interface SnapshotResult { diff --git a/starters/apps/base/src/global.css b/starters/apps/base/src/global.css new file mode 100644 index 00000000000..9813f112800 --- /dev/null +++ b/starters/apps/base/src/global.css @@ -0,0 +1,15 @@ +html { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +} + +body { + padding: 0; + line-height: inherit; +} diff --git a/starters/apps/base/src/root.tsx b/starters/apps/base/src/root.tsx new file mode 100644 index 00000000000..61d97902e85 --- /dev/null +++ b/starters/apps/base/src/root.tsx @@ -0,0 +1,13 @@ +import './global.css'; + +export const Root = () => { + return ( + + + + Qwik Blank App + + + + ); +}; diff --git a/starters/apps/starter-builder/src/components/app/app.tsx b/starters/apps/starter-builder/src/components/app/app.tsx index 483f0580008..1d5ebcdc899 100644 --- a/starters/apps/starter-builder/src/components/app/app.tsx +++ b/starters/apps/starter-builder/src/components/app/app.tsx @@ -2,8 +2,6 @@ import { component$ } from '@builder.io/qwik'; import { Footer } from '../footer/footer'; import { Header } from '../header/header'; -import './global.css'; - export const App = component$(() => { return ( <> diff --git a/starters/apps/starter-builder/src/components/app/global.css b/starters/apps/starter-builder/src/global.css similarity index 100% rename from starters/apps/starter-builder/src/components/app/global.css rename to starters/apps/starter-builder/src/global.css diff --git a/starters/apps/starter-builder/src/root.tsx b/starters/apps/starter-builder/src/root.tsx index dda47707365..d9a7b165d5a 100644 --- a/starters/apps/starter-builder/src/root.tsx +++ b/starters/apps/starter-builder/src/root.tsx @@ -1,5 +1,7 @@ import { App } from './components/app/app'; +import './global.css'; + export const Root = () => { return ( diff --git a/starters/apps/starter-partytown/src/components/app/app.tsx b/starters/apps/starter-partytown/src/components/app/app.tsx index 12e5512a0d5..50c4549442e 100644 --- a/starters/apps/starter-partytown/src/components/app/app.tsx +++ b/starters/apps/starter-partytown/src/components/app/app.tsx @@ -1,5 +1,4 @@ import { component$, useStore } from '@builder.io/qwik'; -import './global.css'; export const App = component$(() => { const state = useStore({ name: 'World', running: true }); diff --git a/starters/apps/starter-partytown/src/components/app/global.css b/starters/apps/starter-partytown/src/global.css similarity index 100% rename from starters/apps/starter-partytown/src/components/app/global.css rename to starters/apps/starter-partytown/src/global.css diff --git a/starters/apps/starter-partytown/src/root.tsx b/starters/apps/starter-partytown/src/root.tsx index d504a869120..7ff1d058131 100644 --- a/starters/apps/starter-partytown/src/root.tsx +++ b/starters/apps/starter-partytown/src/root.tsx @@ -1,6 +1,8 @@ import { App } from './components/app/app'; import { partytownSnippet } from '@builder.io/partytown/integration'; +import './global.css'; + export const Root = () => { return ( diff --git a/starters/apps/starter/src/components/app/app.tsx b/starters/apps/starter/src/components/app/app.tsx index a00c99eaa9b..ca8cf5a2b44 100644 --- a/starters/apps/starter/src/components/app/app.tsx +++ b/starters/apps/starter/src/components/app/app.tsx @@ -1,8 +1,6 @@ import { useStore, component$, Host } from '@builder.io/qwik'; import { Logo } from '../logo/logo'; -import './global.css'; - export const App = component$(() => { const state = useStore({ name: 'World' }); return ( diff --git a/starters/apps/starter/src/components/app/global.css b/starters/apps/starter/src/global.css similarity index 100% rename from starters/apps/starter/src/components/app/global.css rename to starters/apps/starter/src/global.css diff --git a/starters/apps/starter/src/root.tsx b/starters/apps/starter/src/root.tsx index 75b2301a804..966bfd9b098 100644 --- a/starters/apps/starter/src/root.tsx +++ b/starters/apps/starter/src/root.tsx @@ -1,5 +1,7 @@ import { App } from './components/app/app'; +import './global.css'; + export const Root = () => { return ( diff --git a/yarn.lock b/yarn.lock index 8712222b32b..185c0b4376e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -453,7 +453,14 @@ __metadata: languageName: node linkType: hard -"@builder.io/qwik@0.0.24, @builder.io/qwik@workspace:packages/qwik": +"@builder.io/qwik@npm:0.0.24": + version: 0.0.24 + resolution: "@builder.io/qwik@npm:0.0.24" + checksum: 8c51e19933c05f30711091c44d8b1d8abaa504aec83439a4434a814fd2cfbf2dd24b4bc218741796d6ef0ccb872196656198a1658a1cfb58a037ae3afc8a1da5 + languageName: node + linkType: hard + +"@builder.io/qwik@workspace:packages/qwik": version: 0.0.0-use.local resolution: "@builder.io/qwik@workspace:packages/qwik" languageName: unknown