feat: add qwik-city starter (#546)

Author: manucorporat

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.21-0",
   "scripts": {
     "build": "yarn node scripts --tsc --build --api --platform-binding-wasm-copy",
-    "build.full": "yarn node scripts --tsc --build --api --eslint --platform-binding --wasm",
+    "build.full": "yarn node scripts --tsc --build --api --eslint --qwikcity --platform-binding --wasm",
     "build.platform": "yarn node scripts --platform-binding",
     "build.platform.copy": "yarn node scripts --platform-binding-wasm-copy",
     "build.only_javascript": "yarn node scripts --tsc --build --api",

packages/create-qwik/api/generate-starter.ts

@@ -61,11 +61,20 @@ function generateUserStarter(
     throw new Error(`Unable to find base app.`);
   }
 
+  if (starterServer) {
+    const serverPkgJson = readPackageJson(starterServer.dir);
+    const vite = serverPkgJson.qwik?.vite;
+    replacements.push([/\/\* VITE_IMPORTS \*\//g, vite?.VITE_IMPORTS ?? '']);
+    replacements.push([/\/\* VITE_CONFIG \*\//g, vite?.VITE_CONFIG ?? '']);
+    replacements.push([/\/\* VITE_QWIK \*\//g, vite?.VITE_QWIK ?? '']);
+    replacements.push([/\/\* VITE_PLUGINS \*\//g, vite?.VITE_PLUGINS ?? '']);
+  }
+
   cp(baseApp.dir, result.outDir, replacements);
   cp(starterApp.dir, result.outDir, replacements);
 
   const pkgJson = readPackageJson(baseApp.dir);
-  const starterPkgJson = readPackageJson(baseApp.dir);
+  const starterPkgJson = readPackageJson(starterApp.dir);
   mergePackageJSONs(pkgJson, starterPkgJson);
 
   let readmeContent = baseApp.readme!.trim() + '\n\n';

packages/create-qwik/api/utils-api.ts

@@ -1,5 +1,5 @@
 import { copyFileSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
-import { extname, join } from 'path';
+import { join } from 'path';
 import type { PackageJSON } from '../../../scripts/util';
 
 export type Replacements = [RegExp, string][];
@@ -17,7 +17,9 @@ export function cp(srcDir: string, destDir: string, replacements: Replacements)
     } else if (s.isFile()) {
       const shouldReplace =
         replacements.length > 0 &&
-        ['.json', '.toml', '.md', '.html'].includes(extname(srcChildPath));
+        ['.json', '.toml', '.md', '.html', 'vite.config.ts'].some((ext) =>
+          srcChildPath.endsWith(ext)
+        );
       if (shouldReplace) {
         let srcContent = readFileSync(srcChildPath, 'utf8');
         for (const regex of replacements) {

packages/docs/package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@builder.io/partytown": "^0.5.4",
     "@builder.io/qwik": "0.0.21-0",
-    "@builder.io/qwik-city": "0.0.7",
+    "@builder.io/qwik-city": "0.0.10",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@cloudflare/workers-types": "^3.10.0",
     "autoprefixer": "10.4.7",

packages/docs/pages/docs/index.md packages/docs/pages/docs/INDEXpackages/docs/pages/docs/index.md renamed to packages/docs/pages/docs/INDEX

@@ -1,5 +1,5 @@
 import { usePage } from '@builder.io/qwik-city';
-import { component$, Host, $, useHostElement, useScopedStyles$ } from '@builder.io/qwik';
+import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
 import { ChatIcon } from '../svgs/chat-icon';
 import { EditIcon } from '../svgs/edit-icon';
 import { GithubLogo } from '../svgs/github-logo';

packages/docs/pages/docs/file.mdx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { InputOptions, OutputAsset, OutputChunk } from 'rollup';
 import type { Diagnostic, QwikRollupPluginOptions } from '@builder.io/qwik/optimizer';
-import type { ReplInputOptions, ReplModuleInput, ReplModuleOutput, ReplResult } from '../types';
+import type { ReplInputOptions, ReplModuleOutput, ReplResult } from '../types';
 import { getCtx, QwikReplContext } from './context';
 import { loadDependencies } from './dependencies';
 import { ssrHtml } from './ssr-html';

packages/docs/pages/examples/readme.md packages/docs/pages/examples/READMEpackages/docs/pages/examples/readme.md renamed to packages/docs/pages/examples/README

@@ -1,20 +1,21 @@
 import {
   component$,
   Host,
-  useHostElement,
   useScopedStyles$,
   useWatch$,
   useStore,
+  useStyles$,
 } from '@builder.io/qwik';
 import { Repl } from '../../components/repl/repl';
 import styles from './examples.css?inline';
 import { Header } from '../../components/header/header';
-import { setHeadMeta, setHeadStyles } from '@builder.io/qwik-city';
+import { useHeadMeta } from '@builder.io/qwik-city';
 import exampleSections, { ExampleApp } from '@examples-data';
 import type { ReplAppInput } from '../../components/repl/types';
 
 const Examples = component$((props: ExamplesProp) => {
-  const hostElm = useHostElement();
+  useHeadMeta({ title: `Qwik Examples` });
+  useStyles$(`html,body { margin: 0; height: 100%; overflow: hidden; }`);
 
   const store = useStore<ExamplesStore>(() => {
     //  /examples/section/app-id
@@ -37,15 +38,6 @@ const Examples = component$((props: ExamplesProp) => {
     store.files = app?.inputs || [];
   });
 
-  useWatch$(() => {
-    setHeadMeta(hostElm, { title: `Qwik Examples` });
-    setHeadStyles(hostElm, [
-      {
-        style: `html,body { margin: 0; height: 100%; overflow: hidden; }`,
-      },
-    ]);
-  });
-
   useScopedStyles$(styles);
 
   return (