feat(create-vite): add qwik templates

packages/create-vite/src/index.ts

@@ -8,6 +8,7 @@ import {
   blue,
   cyan,
   green,
+  lightBlue,
   lightGreen,
   lightRed,
   magenta,
@@ -169,6 +170,24 @@ const FRAMEWORKS: Framework[] = [
       },
     ],
   },
+  {
+    name: 'qwik',
+    display: 'Qwik',
+    color: lightBlue,
+    variants: [
+      {
+        name: 'qwik-ts',
+        display: 'TypeScript',
+        color: lightBlue,
+      },
+      {
+        name: 'custom-qwik-city',
+        display: 'QwikCity ↗',
+        color: lightBlue,
+        customCommand: 'npm create qwik@latest TARGET_DIR',
+      },
+    ],
+  },
   {
     name: 'others',
     display: 'Others',

packages/create-vite/template-qwik-ts/.eslintignore

@@ -0,0 +1,31 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+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

packages/create-vite/template-qwik-ts/.eslintrc.cjs

@@ -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'],
+  },
+}

packages/create-vite/template-qwik-ts/.prettierignore

@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules

packages/create-vite/template-qwik-ts/README.md

@@ -0,0 +1,47 @@
+# Qwik Library ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik on GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+- [Partytown](https://partytown.builder.io/)
+- [Mitosis](https://github.com/BuilderIO/mitosis)
+- [Builder.io](https://www.builder.io/)
+
+---
+
+## Project Structure
+
+Inside your project, you'll see the following directories and files:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── index.ts
+```
+
+- `src/components`: Recommended directory for components.
+
+- `index.ts`: The entry point of your component library, make sure all the public components are exported from this file.
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). For Qwik during development, the `dev` command will also server-side render (SSR) the output. The client-side development modules are loaded by the browser.
+
+```
+pnpm dev
+```
+
+> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
+
+## Production
+
+The production build should generate the production build of your component library in (./lib) and the typescript type definitions in (./lib-types).
+
+```
+pnpm build
+```

packages/create-vite/template-qwik-ts/_gitignore

@@ -0,0 +1,38 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# 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?
+
+# Yarn
+.yarn/*
+!.yarn/releases

packages/create-vite/template-qwik-ts/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "my-qwik-library-name",
+  "version": "0.0.1",
+  "description": "Create a reusable Qwik component library",
+  "engines": {
+    "node": ">=15.0.0"
+  },
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build.lib": "vite build --mode lib",
+    "build.types": "tsc --emitDeclarationOnly",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "np",
+    "start": "vite --open --mode ssr",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "1.1.5",
+    "@types/eslint": "8.40.0",
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/eslint-plugin": "5.59.8",
+    "@typescript-eslint/parser": "5.59.8",
+    "eslint": "8.41.0",
+    "eslint-plugin-qwik": "latest",
+    "np": "7.6.1",
+    "prettier": "2.8.8",
+    "typescript": "5.0.4",
+    "undici": "5.22.1",
+    "vite": "4.3.9"
+  }
+}

packages/create-vite/template-qwik-ts/src/components/app/app.tsx

@@ -0,0 +1,35 @@
+import { component$, useSignal } from '@builder.io/qwik'
+
+import qwiklogo from '../../assets/qwik.svg'
+import viteLogo from '../../assets/vite.svg'
+
+export const App = component$(() => {
+  const count = useSignal(0)
+
+  return (
+    <>
+      <div id="container">
+        <div>
+          <a href="https://vitejs.dev" target="_blank">
+            <img src={viteLogo} class="logo" alt="Vite logo" />
+          </a>
+          <a href="https://qwik.builder.io/" target="_blank">
+            <img src={qwiklogo} class="logo qwik" alt="Qwik logo" />
+          </a>
+        </div>
+        <h1>Vite + Qwik</h1>
+        <div class="card">
+          <button onClick$={() => (count.value += 1)}>
+            count is {count.value}
+          </button>
+          <p>
+            Edit <code>src/routes/index.tsx</code> and save to test HMR
+          </p>
+        </div>
+        <p class="read-the-docs">
+          Click on the Vite and Qwik logos to learn more
+        </p>
+      </div>
+    </>
+  )
+})

packages/create-vite/template-qwik-ts/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, type RenderOptions } from '@builder.io/qwik'
+import Root from './root'
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts)
+}

packages/create-vite/template-qwik-ts/src/entry.ssr.tsx

@@ -0,0 +1,25 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from '@builder.io/qwik/server'
+import { manifest } from '@qwik-client-manifest'
+import Root from './root'
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+  })
+}