feat: ts based vite.config.ts (#219)

.devcontainer/Dockerfile

@@ -3,10 +3,8 @@ FROM node:16.12.0-buster
 ENV RUSTUP_HOME=/usr/local/rustup \
  CARGO_HOME=/usr/local/cargo \
  PATH=/usr/local/cargo/bin:$PATH \
- RUST_VERSION=1.58.1 \
- YARN_VERSION=1.22.17
+ RUST_VERSION=1.58.1
 
-RUN npm install "yarn@$RUSTUP_HOME"
 
 RUN set -eux; \
  dpkgArch="$(dpkg --print-architecture)"; \
@@ -26,9 +24,8 @@ RUN set -eux; \
  chmod -R a+w $RUSTUP_HOME $CARGO_HOME; \
  rustup --version; \
  cargo --version; \
- rustc --version;
-
-RUN rustup update \
- rustup target add wasm32-unknown-unknown \
- cargo install cargo-insta \
- rustup component add clippy
+ rustc --version; \
+ rustup update; \
+ rustup target add wasm32-unknown-unknown; \
+ cargo install cargo-insta; \
+ rustup component add clippy;

.devcontainer/devcontainer.json

@@ -20,6 +20,9 @@
  "bradlc.vscode-tailwindcss",
  "manucorporat.vermoji",
  "ms-azuretools.vscode-docker",
- "mitsuhiko.insta"
- ]
+ "mitsuhiko.insta",
+ "silvenon.mdx",
+ "csstools.postcss"
+ ],
+ "postStartCommand": "yarn install"
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@builder.io/qwik",
- "version": "0.0.16-12",
+ "version": "0.0.16-13",
  "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
  "scripts": {
  "build": "node scripts --tsc --build --api --platform-binding --wasm",

scripts/submodule-qwikloader.ts

@@ -63,7 +63,7 @@ export async function submoduleQwikLoader(config: BuildConfig) {
  passes: 2,
  },
  format: {
- comments: false,
+ comments: /@vite/,
  },
  }),
  ],

src/bootloader-shared.ts

@@ -87,7 +87,8 @@ export const qwikLoader = (doc: Document, hasInitialized?: boolean | number) =>
  if (url) {
  const handler = getModuleExport(
  url,
- (window as any)[url.pathname] || (await import(String(url).split('#')[0]))
+ (window as any)[url.pathname] ||
+ (await import(/* @vite-ignore */ String(url).split('#')[0]))
  );
  previousCtx = (document as any)[Q_CONTEXT];
  try {

src/cli/package.json

@@ -1,6 +1,6 @@
 {
  "name": "create-qwik",
- "version": "0.0.16-12",
+ "version": "0.0.16-13",
  "description": "Interactive CLI and API for generating Qwik projects.",
  "bin": {
  "create-qwik": "create-qwik"

src/core/api.md

@@ -259,7 +259,7 @@ export namespace QwikJSX {
 }
 
 // @public
-export function render(parent: Element | Document, jsxNode: JSXNode<unknown>): Promise<HTMLElement[]>;
+export function render(parent: Element | Document, jsxNode: JSXNode<unknown> | FunctionComponent<any>): Promise<HTMLElement[]>;
 
 // @public (undocumented)
 export type RenderableProps<P, RefType = any> = P & Readonly<{

src/core/render/render.public.ts

@@ -1,7 +1,8 @@
 import { flattenPromiseTree } from '../util/promises';
 import { NodeType } from '../util/types';
 import { cursorForParent } from './cursor';
-import type { JSXNode } from './jsx/types/jsx-node';
+import { isJSXNode, jsx } from './jsx/jsx-runtime';
+import type { JSXNode, FunctionComponent } from './jsx/types/jsx-node';
 import { ComponentRenderQueue, visitJsxNode } from './render';
 
 /**
@@ -18,8 +19,12 @@ import { ComponentRenderQueue, visitJsxNode } from './render';
  */
 export async function render(
  parent: Element | Document,
- jsxNode: JSXNode<unknown>
+ jsxNode: JSXNode<unknown> | FunctionComponent<any>
 ): Promise<HTMLElement[]> {
+ // If input is not JSX, convert it
+ if (!isJSXNode(jsxNode)) {
+ jsxNode = jsx(jsxNode, null);
+ }
  const renderQueue: ComponentRenderQueue = [];
  let firstChild = parent.firstChild;
  while (firstChild && firstChild.nodeType > NodeType.COMMENT_NODE) {

src/server/api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { FunctionComponent } from '@builder.io/qwik';
+import { JSXNode } from '@builder.io/qwik';
 import type { OutputEntryMap } from '@builder.io/qwik/optimizer';
 
 // @public
@@ -70,7 +71,7 @@ export const QwikLoader: FunctionComponent<QwikLoaderProps>;
 export const QwikPrefetch: FunctionComponent<QwikPrefetchProps>;
 
 // @public
-export function renderToDocument(doc: Document, rootNode: any, opts: RenderToDocumentOptions): Promise<void>;
+export function renderToDocument(doc: Document, rootNode: JSXNode<unknown> | FunctionComponent<any>, opts: RenderToDocumentOptions): Promise<void>;
 
 // Warning: (ae-forgotten-export) The symbol "SerializeDocumentOptions" needs to be exported by the entry point index.d.ts
 //

src/server/document.ts

@@ -1,4 +1,4 @@
-import { dehydrate, render } from '@builder.io/qwik';
+import { dehydrate, FunctionComponent, JSXNode, render } from '@builder.io/qwik';
 import qwikDom from '@builder.io/qwik-dom';
 import { setServerPlatform } from './platform';
 import { serializeDocument } from './serialize';
@@ -66,7 +66,7 @@ export function createDocument(opts?: DocumentOptions) {
  */
 export async function renderToDocument(
  doc: Document,
- rootNode: any,
+ rootNode: JSXNode<unknown> | FunctionComponent<any>,
  opts: RenderToDocumentOptions
 ) {
  if (!doc || doc.nodeType !== 9) {

src/testing/api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { FunctionComponent } from '@builder.io/qwik';
+import { JSXNode } from '@builder.io/qwik';
 import type { OutputEntryMap } from '@builder.io/qwik/optimizer';
 
 // @public
@@ -70,7 +71,7 @@ export const QwikLoader: FunctionComponent<QwikLoaderProps>;
 export const QwikPrefetch: FunctionComponent<QwikPrefetchProps>;
 
 // @public
-export function renderToDocument(doc: Document, rootNode: any, opts: RenderToDocumentOptions): Promise<void>;
+export function renderToDocument(doc: Document, rootNode: JSXNode<unknown> | FunctionComponent<any>, opts: RenderToDocumentOptions): Promise<void>;
 
 // Warning: (ae-forgotten-export) The symbol "SerializeDocumentOptions" needs to be exported by the entry point index.d.ts
 //

starters/apps/base/index.html

@@ -8,9 +8,9 @@
  <script type="module">
  // Vite Dev Mode Only
  import '@builder.io/qwik/qwikloader.js';
- import { render, jsx } from '@builder.io/qwik';
+ import { render } from '@builder.io/qwik';
  import { App } from '/src/main.tsx';
- render(document.body, jsx(App));
+ render(document.body, App);
  </script>
  </body>
 </html>

starters/apps/base/package.json

@@ -3,11 +3,13 @@
  "version": "0.0.0",
  "description": "",
  "scripts": {
- "build": "npm run build.client && npm run build.server",
+ "typecheck": "npx tsc --noEmit",
+ "build": "npm run typecheck && npm run build.client && npm run build.server",
  "build.client": "vite build",
  "build.server": "vite build --outDir server/build --ssr src/entry.server.tsx",
- "dev": "vite",
  "preview": "vite preview",
+ "dev": "vite",
+ "dev.client": "vite --mode clientonly",
  "start": "npm run dev"
  },
  "devDependencies": {

starters/apps/base/tsconfig.json

@@ -11,6 +11,7 @@
  "esModuleInterop": true,
  "skipLibCheck": true,
  "incremental": true,
+ "isolatedModules": true,
  "types": ["vite/client"]
  },
  "include": ["src"]

starters/apps/base/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { dirname, resolve } from 'path';
+import { writeFile, mkdir } from 'fs/promises';
+
+export default defineConfig(({ mode }) => {
+ return {
+ build: {
+ rollupOptions: {
+ output: {
+ chunkFileNames: 'q-[hash].js',
+ assetFileNames: 'q-[hash].[ext]',
+ },
+ },
+ },
+ ssr: {
+ noExternal: true,
+ },
+ plugins: [
+ qwikVite({
+ // On `clientonly` mode, lets disable SSR in development, so app is fully client bootstrapped
+ ssr: mode === 'clientonly' ? false : undefined,
+ srcDir: resolve('./src'),
+ entryStrategy: {
+ type: 'single',
+ },
+ symbolsOutput: (data) => {
+ outputJSON('./server/q-symbols.json', data);
+ },
+ }),
+ ],
+ };
+});
+
+async function outputJSON(path: string, data: any) {
+ await mkdir(dirname(path), { recursive: true });
+ await writeFile(path, JSON.stringify(data, null, 2));
+}

starters/apps/todo/src/components/item/item.tsx

@@ -20,7 +20,7 @@ export const Item = component$(
  return $(() => {
  return (
  <Host class={{ completed: props.item.completed, editing: state.editing }}>
- <div class="top-4">
+ <div class="view">
  <input
  class="toggle"
  type="checkbox"

starters/servers/express/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { dirname, resolve } from 'path';
+import { writeFile, mkdir } from 'fs/promises';
+
+export default defineConfig(({ mode }) => {
+ return {
+ build: {
+ rollupOptions: {
+ output: {
+ // Qwik tends to generate long chunk names
+ chunkFileNames: 'q-[hash].js',
+ assetFileNames: 'q-[hash].[ext]',
+ },
+ },
+ },
+ plugins: [
+ qwikVite({
+ // On `clientonly` mode, lets disable SSR in development, so app is fully client bootstrapped
+ ssr: mode === 'clientonly' ? false : undefined,
+ srcDir: resolve('./src'),
+ entryStrategy: {
+ type: 'single',
+ },
+ symbolsOutput: (data) => {
+ outputJSON('./server/q-symbols.json', data);
+ },
+ }),
+ ],
+ };
+});
+
+async function outputJSON(path: string, data: any) {
+ await mkdir(dirname(path), { recursive: true });
+ await writeFile(path, JSON.stringify(data, null, 2));
+}