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;
+}