fix: starter's root.tsx and global styles (#590)

manucorporat · web-flow · commit 8c4e554686cd · 2022-06-10T21:11:58.000Z
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<void>;
+export function setServerPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper | undefined): Promise<void>;
 
 // @public (undocumented)
 export interface SnapshotResult {
diff --git 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<string, any>;
 
-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
@@ -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
@@ -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
@@ -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<void>;
+export function setServerPlatform(document: any, opts: SerializeDocumentOptions, mapper: SymbolMapper | undefined): Promise<void>;
 
 // @public (undocumented)
 export interface SnapshotResult {
diff --git a/starters/apps/base/src/global.css 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
@@ -0,0 +1,13 @@
+import './global.css';
+
+export const Root = () => {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <title>Qwik Blank App</title>
+      </head>
+      <body></body>
+    </html>
+  );
+};
diff --git 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/global.css b/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
@@ -1,5 +1,7 @@
 import { App } from './components/app/app';
 
+import './global.css';
+
 export const Root = () => {
   return (
     <html>
diff --git 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/global.css b/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
@@ -1,6 +1,8 @@
 import { App } from './components/app/app';
 import { partytownSnippet } from '@builder.io/partytown/integration';
 
+import './global.css';
+
 export const Root = () => {
   return (
     <html>
diff --git 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/global.css b/starters/apps/starter/src/global.css
diff --git 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 (
     <html>
diff --git 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

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"private": true,`
`3`	`3`	`"name": "qwik-monorepo",`
`4`		`- "version": "0.0.24",`
	`4`	`+ "version": "0.0.25",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "yarn node scripts --tsc --build --api --platform-binding-wasm-copy",`
`7`	`7`	`"build.full": "yarn node scripts --tsc --build --api --eslint --qwikcity --platform-binding --wasm",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "create-qwik",`
`3`		`- "version": "0.0.24",`
	`3`	`+ "version": "0.0.25",`
`4`	`4`	`"description": "Interactive CLI and API for generating Qwik projects.",`
`5`	`5`	`"bin": "create-qwik",`
`6`	`6`	`"main": "index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "eslint-plugin-qwik",`
`3`		`- "version": "0.0.24",`
	`3`	`+ "version": "0.0.25",`
`4`	`4`	`"description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"author": "Builder Team",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@builder.io/qwik",`
`3`		`- "version": "0.0.24",`
	`3`	`+ "version": "0.0.25",`
`4`	`4`	`"description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",`
`5`	`5`	`"main": "./dist/core.cjs",`
`6`	`6`	`"module": "./dist/core.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {`
`158`	`158`	`opts.input = [path.resolve(srcDir, 'entry.ssr.tsx')];`
`159`	`159`	`} else {`
`160`	`160`	`// client input default`
`161`		`- opts.input = [path.resolve(srcDir, 'components', 'app', 'app.tsx')];`
	`161`	`+ opts.input = [path.resolve(srcDir, 'root.tsx')];`
`162`	`162`	`}`
`163`	`163`	`}`
`164`	`164`	`opts.input = opts.input.map((input) => {`