feat: add qwik-city starter (QwikDev#546)

Mouvedia · May 28, 2022 · afd3f69 · afd3f69
1 parent a4d1575
commit afd3f69
Show file tree

Hide file tree

Showing 89 changed files with 1,202 additions and 343 deletions.
diff --git a/package.json b/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",

diff --git a/packages/create-qwik/api/generate-starter.ts b/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';

diff --git a/packages/create-qwik/api/utils-api.ts b/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) {

diff --git a/packages/docs/package.json b/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",

diff --git a/packages/docs/pages/docs/index.md → packages/docs/pages/docs/INDEX b/packages/docs/pages/docs/index.md → packages/docs/pages/docs/INDEX
diff --git a/packages/docs/pages/docs/file.mdx b/packages/docs/pages/docs/file.mdx
diff --git a/packages/docs/pages/examples/readme.md → packages/docs/pages/examples/README b/packages/docs/pages/examples/readme.md → packages/docs/pages/examples/README
diff --git a/packages/docs/src/components/on-this-page/on-this-page.tsx b/packages/docs/src/components/on-this-page/on-this-page.tsx
@@ -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';

diff --git a/packages/docs/src/components/repl/worker/update.ts b/packages/docs/src/components/repl/worker/update.ts
@@ -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';

diff --git a/packages/docs/src/layouts/examples/examples.tsx b/packages/docs/src/layouts/examples/examples.tsx
@@ -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 (

diff --git a/packages/docs/src/layouts/playground/playground.tsx b/packages/docs/src/layouts/playground/playground.tsx
@@ -2,22 +2,23 @@ import {
   $,
   component$,
   Host,
-  useHostElement,
   useScopedStyles$,
-  useWatch$,
   useStore,
   useClientEffect$,
+  useStyles$,
 } from '@builder.io/qwik';
 import { Repl } from '../../components/repl/repl';
 import { Header } from '../../components/header/header';
-import { getLocation, setHeadMeta, setHeadStyles } from '@builder.io/qwik-city';
+import { getLocation, useHeadMeta } from '@builder.io/qwik-city';
 import styles from './playground.css?inline';
 import playgroundApp from '@playground-data';
 import type { ReplAppInput, ReplModuleInput } from '../../components/repl/types';
 import { BUILD_MODE_OPTIONS, ENTRY_STRATEGY_OPTIONS } from '../../components/repl/repl-options';
 
 const Playground = component$(() => {
-  const hostElm = useHostElement();
+  useStyles$(`html,body { margin: 0; height: 100%; overflow: hidden; }`);
+  useScopedStyles$(styles);
+  useHeadMeta({ title: `Qwik Playground` });
 
   const store = useStore<PlaygroundStore>(() => {
     const initStore: PlaygroundStore = {
@@ -90,17 +91,6 @@ const Playground = component$(() => {
     }
   });
 
-  useWatch$(() => {
-    setHeadMeta(hostElm, { title: `Qwik Playground` });
-    setHeadStyles(hostElm, [
-      {
-        style: `html,body { margin: 0; height: 100%; overflow: hidden; }`,
-      },
-    ]);
-  });
-
-  useScopedStyles$(styles);
-
   const pointerDown = $(() => {
     store.colResizeActive = true;
   });

diff --git a/packages/docs/src/layouts/tutorial/tutorial.tsx b/packages/docs/src/layouts/tutorial/tutorial.tsx
@@ -1,32 +1,16 @@
-import {
-  component$,
-  Host,
-  Slot,
-  useHostElement,
-  useScopedStyles$,
-  useStore,
-  useWatch$,
-} from '@builder.io/qwik';
+import { component$, Host, Slot, useScopedStyles$, useStore, useStyles$ } from '@builder.io/qwik';
 import { useLocation } from '../../utils/useLocation';
 import { Repl } from '../../components/repl/repl';
 import styles from './tutorial.css?inline';
 import { TutorialContentFooter } from './tutorial-content-footer';
 import { TutorialContentHeader } from './tutorial-content-header';
 import tutorialSections, { TutorialApp } from '@tutorial-data';
 import { Header } from '../../components/header/header';
-import { setHeadStyles } from '@builder.io/qwik-city';
 import type { ReplAppInput } from '../../components/repl/types';
 
 const Tutorial = component$(() => {
   useScopedStyles$(styles);
-
-  useWatch$(() => {
-    setHeadStyles(useHostElement(), [
-      {
-        style: `html,body { margin: 0; height: 100%; overflow: hidden; }`,
-      },
-    ]);
-  });
+  useStyles$(`html,body { margin: 0; height: 100%; overflow: hidden; }`);
 
   const loc = useLocation();
   const getTutorialApp = (): TutorialApp | undefined => {

diff --git a/packages/qwik-city/README.md b/packages/qwik-city/README.md
@@ -0,0 +1 @@
+# QwikCity
diff --git a/packages/qwik-city/package.json b/packages/qwik-city/package.json
@@ -1,13 +1,11 @@
 {
   "name": "@builder.io/qwik-city",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "Static Site Generator for Qwik",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "yarn node -r esbuild-register scripts/build.ts && npm run build.api",
-    "build.api": "tsc && api-extractor run -c src/runtime/api-extractor.json --local && api-extractor run -c src/vite/api-extractor.json --local",
     "test": "uvu -r tsm src/vite/tests"
   },
   "dependencies": {
@@ -19,6 +17,7 @@
     "@microsoft/api-extractor": "7.24.0",
     "@types/github-slugger": "^1.3.0",
     "@types/marked": "^4.0.3",
+    "@types/node": "17.0.34",
     "@types/refractor": "^3.0.2",
     "estree-util-value-to-estree": "^1.3.0",
     "front-matter": "^4.0.2",
@@ -56,7 +55,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "vite"
   ],
   "license": "MIT",
   "homepage": "https://qwik.builder.io/",

diff --git a/packages/qwik-city/scripts/build.ts b/packages/qwik-city/scripts/build.ts
diff --git a/packages/qwik-city/src/api-extractor.json b/packages/qwik-city/src/api-extractor.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "bundledPackages": [],
+  "compiler": {
+    "overrideTsconfig": {
+      "compilerOptions": {
+        "isolatedModules": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true
+      },
+      "include": ["dist-dev/dts-out/packages/qwik-city/src"]
+    }
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": false
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  },
+  "messages": {
+    "compilerMessageReporting": {
+      "default": {
+        "logLevel": "error"
+      }
+    },
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "error"
+      }
+    },
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "error"
+      }
+    }
+  }
+}