feat: generate qwik starter from QwikCity demo (npm create qwik@latest)

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "89a60295-eef2-4537-9923-754797971f01",
+  "lastSync": 0
+}

starters/qwik-express/.eslintignore

@@ -0,0 +1,30 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts

starters/qwik-express/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:qwik/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'prefer-spread': 'off',
+    'no-case-declarations': 'off',
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+  },
+};

starters/qwik-express/.gitignore

@@ -0,0 +1,35 @@
+# Build
+build
+dist
+lib
+server
+functions/**/*.js
+
+# Development
+node_modules
+
+# Cache
+.cache
+.mf
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

starters/qwik-express/.prettierignore

@@ -0,0 +1,23 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+dist
+dist-dev
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo

starters/qwik-express/README.md

@@ -0,0 +1,71 @@
+# Qwik qwik-express ⚡️
+
+- Starter with built-in routing, powered by Qwik City
+- Vite.js tooling.
+- Express.js server.
+- Prettier code formatter.
+
+## Development Builds
+
+### Client only
+
+During development, the index.html is not a result of server-side rendering, but rather the Qwik app is built using client-side JavaScript only. This is ideal for development with Vite and its ability to reload modules quickly and on-demand. However, this mode is only for development and does not showcase "how" Qwik works since JavaScript is required to execute, and Vite imports many development modules for the app to work.
+
+```
+npm run dev
+```
+
+### Server-side Rendering (SSR) and Client
+
+Server-side rendered index.html, with client-side modules prefetched and loaded by the browser. This can be used to test out server-side rendered content during development, but will be slower than the client-only development builds.
+
+```
+npm run dev.ssr
+```
+
+## Production Builds
+
+A production build should generate the client and server modules by running both client and server build commands.
+
+```
+npm run build
+```
+
+### Client Modules
+
+Production build that creates only the client-side modules that are dynamically imported by the browser.
+
+```
+npm run build.client
+```
+
+### Server Modules
+
+Production build that creates the server-side render (SSR) module that is used by the server to render the HTML.
+
+```
+npm run build.ssr
+```
+
+## Express Server
+
+This app has a minimal [Express server](https://expressjs.com/) implementation. After running a full build, you can preview the build using the command:
+
+```
+npm run serve
+```
+
+Then visit [http://localhost:8080/](http://localhost:8080/)
+
+--------------------
+
+## Related
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Qwik Github](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Discord](https://qwik.builder.io/chat)
+- [Vite](https://vitejs.dev/)
+- [Partytown](https://partytown.builder.io/)
+- [Mitosis](https://github.com/BuilderIO/mitosis)
+- [Builder.io](https://www.builder.io/)

starters/qwik-express/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "qwik-express",
+  "description": "Starter with built-in routing, powered by Qwik City Vite.js tooling. Express.js server. Prettier code formatter.",
+  "scripts": {
+    "build": "npm run typecheck && npm run build.client && npm run build.ssr",
+    "build.client": "vite build",
+    "build.ssr": "vite build --ssr src/entry.express.tsx",
+    "dev": "vite",
+    "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js --mode ssr",
+    "dev.ssr": "node --inspect node_modules/vite/bin/vite.js --mode ssr",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "serve": "node server/entry.express.js",
+    "start": "npm run dev",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "0.0.33",
+    "@builder.io/qwik-city": "0.0.13",
+    "@types/eslint": "8.4.2",
+    "@types/express": "4.17.13",
+    "@types/node": "latest",
+    "@typescript-eslint/eslint-plugin": "5.27.0",
+    "@typescript-eslint/parser": "5.27.0",
+    "eslint": "8.16.0",
+    "eslint-plugin-qwik": "0.0.33",
+    "express": "4.17.3",
+    "node-fetch": "2.6.7",
+    "prettier": "2.6.2",
+    "typescript": "4.7.2",
+    "vite": "2.9.9"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "homepage": "https://qwik.builder.io/",
+  "license": "",
+  "private": true
+}

starters/qwik-express/public/_headers

@@ -0,0 +1,2 @@
+/build/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

starters/qwik-express/src/components/app/app.tsx

@@ -0,0 +1,13 @@
+import { component$, Host } from '@builder.io/qwik';
+import { Page } from '../page/page';
+import { useQwikCity } from '@builder.io/qwik-city';
+
+export const App = component$(() => {
+  useQwikCity();
+
+  return (
+    <Host>
+      <Page />
+    </Host>
+  );
+});

starters/qwik-express/src/components/counter/counter.tsx

@@ -0,0 +1,19 @@
+import { component$, useScopedStyles$, useStore } from '@builder.io/qwik';
+
+export const Counter = component$(() => {
+  const store = useStore({ count: 0 });
+  useScopedStyles$(`
+  .counter {
+    border: 3px solid #1474ff;
+    padding: 10px;
+    border-radius: 10px;
+    color: #1474ff;
+  }
+`);
+
+  return (
+    <button class="counter" type="button" onClick$={() => store.count++}>
+      Increment {store.count}
+    </button>
+  );
+});

starters/qwik-express/src/components/footer/footer.css

@@ -0,0 +1,5 @@
+.docs footer nav a {
+  @apply text-slate-600;
+  @apply no-underline;
+  @apply hover:underline;
+}

starters/qwik-express/src/components/footer/footer.tsx

@@ -0,0 +1,19 @@
+import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+import styles from './footer.css?inline';
+
+export const Footer = component$(
+  () => {
+    useScopedStyles$(styles);
+
+    return (
+      <Host>
+        <div>
+          <span>Made with ♡ by the </span>
+          <a href="https://www.builder.io/">Builder.io</a>
+          <span> team</span>
+        </div>
+      </Host>
+    );
+  },
+  { tagName: 'footer' }
+);

starters/qwik-express/src/components/header/header.css

@@ -0,0 +1,5 @@
+header {
+  background: #1474ff;
+  padding: 30px;
+  color: white;
+}

starters/qwik-express/src/components/header/header.tsx

@@ -0,0 +1,21 @@
+import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+import styles from './header.css?inline';
+
+export const Header = component$(
+  () => {
+    useScopedStyles$(styles);
+
+    return (
+      <Host>
+        <div class="header-inner">
+          <div className="header-logo">
+            <a href="/">
+              <h1>Your Qwikcity site</h1>
+            </a>
+          </div>
+        </div>
+      </Host>
+    );
+  },
+  { tagName: 'header' }
+);

starters/qwik-express/src/components/page/page.tsx

@@ -0,0 +1,24 @@
+import { component$ } from '@builder.io/qwik';
+import { useHeadMeta, usePage } from '@builder.io/qwik-city';
+import NotFound from '../../layouts/not-found/not-found';
+
+export const Page = component$(() => {
+  const page = usePage();
+  if (page) {
+    const attrs = page.attributes;
+    const Layout = page.layout;
+    const Content = page.content;
+
+    useHeadMeta({
+      title: attrs.title + ' - Qwik',
+      description: attrs.description,
+    });
+
+    return (
+      <Layout>
+        <Content />
+      </Layout>
+    );
+  }
+  return <NotFound />;
+});

starters/qwik-express/src/components/sidebar/sidebar.css

@@ -0,0 +1,12 @@
+aside {
+  padding: 10px;
+}
+
+.menu h5 {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.menu li a {
+  text-decoration: underline;
+}