create-qwik 0.0.7 → 0.0.11

package/starters/servers/cloudflare/rollup.config.server.js

@@ -0,0 +1,29 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { qwikRollup } from '@builder.io/qwik/optimizer';
+import jsonPlugin from '@rollup/plugin-json';
+import commonjs from '@rollup/plugin-commonjs';
+
+export default async function () {
+  return {
+    input: {
+      index: 'src/index.cloudflare.tsx',
+    },
+    inlineDynamicImports: true,
+    plugins: [
+      nodeResolve(),
+      jsonPlugin(),
+      qwikRollup({
+        entryStrategy: {
+          type: 'single',
+        },
+      }),
+      commonjs(),
+    ],
+    output: [
+      {
+        dir: 'workers-site/build',
+        format: 'commonjs',
+      },
+    ],
+  };
+}

package/starters/servers/cloudflare/src/index.cloudflare.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable */
+
+// @ts-ignore
+import { renderApp } from './index.server';
+
+// @ts-ignore
+import { getAssetFromKV } from '@cloudflare/kv-asset-handler';
+
+// @ts-ignore
+import symbols from '../server/build/q-symbols.json';
+
+const CACHING = true;
+
+addEventListener('fetch', (event: any) => {
+  event.respondWith(handleRequest(event));
+});
+
+async function handleRequest(event: any) {
+  const request = event.request;
+  const url = new URL(request.url);
+
+  if (/\.\w+$/.test(url.pathname)) {
+    // If path ends with extension, serve static file
+    return handleStaticAssets(event, url);
+  } else {
+    // Otherwise Server side render qwik
+    return handleQwik(event, request);
+  }
+}
+
+async function handleQwik(event: any, request: Request) {
+  const cache = await caches.open('custom:qwik');
+  if (CACHING) {
+    const cachedResponse = await cache.match(request);
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+  }
+
+  const ssrResult = await renderApp({
+    url: new URL(request.url),
+    symbols,
+  });
+
+  const response = new Response(ssrResult.html, {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': `max-age=${60}`,
+    },
+  });
+  if (CACHING) {
+    event.waitUntil(cache.put(request, response.clone()));
+  }
+  return response;
+}
+
+async function handleStaticAssets(event: any, url: URL) {
+  try {
+    // Server static file
+    const options = CACHING
+      ? {
+          cacheControl(req: Request) {
+            const inmmutable = /\/q-\w+\.\w+$/.test(req.url);
+            if (inmmutable) {
+              return {
+                browserTTL: 31536000,
+                edgeTTL: 31536000,
+                bypassCache: false,
+              };
+            }
+            return {
+              browserTTL: 60 * 60,
+              edgeTTL: 60,
+              bypassCache: false,
+            };
+          },
+        }
+      : undefined;
+
+    const staticResponse = await getAssetFromKV(event, options);
+    return staticResponse;
+  } catch (e) {
+    // Handle 404
+    return new Response(`"${url.pathname}" not found`, {
+      status: 404,
+      statusText: 'not found',
+    });
+  }
+}

package/starters/servers/cloudflare/workers-site/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "cloudflare-worker",
+  "main": "build/index.js"
+}

package/starters/servers/cloudflare/wrangler.toml

@@ -0,0 +1,18 @@
+name = "qwik-project-name"
+type = "javascript"
+
+account_id = ""
+workers_dev = true
+route = ""
+zone_id = ""
+compatibility_date = "2021-12-13"
+
+[build]
+command = "npm run build"
+
+[build.upload]
+format = "service-worker"
+
+[site]
+bucket = "public" # directory with your static assets
+entry-point = "workers-site" # JS folder serving your assets

package/starters/servers/express/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "express",
+  "name": "qwik-project-name",
   "description": "Express.js Server",
   "scripts": {
     "serve": "node server/index.js"

package/starters/servers/express/server/index.js

@@ -1,21 +1,15 @@
 const express = require('express');
-const path = require('path');
-const qwik = require('@builder.io/qwik/server');
 const { join } = require('path');
 const { existsSync } = require('fs');
-
+const { renderApp } = require('./build/index.server.js');
+const symbols = require('./build/q-symbols.json');
 const PORT = process.env.PORT || 8080;
 
 async function startServer() {
-  const render = await qwik.createServerRenderer({
-    serverDir: path.join(__dirname, 'build'),
-    serverMainPath: 'index.server.qwik.js',
-    symbolsPath: 'q-symbols.json',
-  });
-
-  async function indexHandler(req, res) {
-    const result = await render({
-      url: req.url,
+  async function handleQwik(req, res) {
+    const result = await renderApp({
+      symbols,
+      url: new URL(`${req.protocol}://${req.hostname}${req.url}`),
       debug: true,
     });
     res.send(result.html);
@@ -23,9 +17,7 @@ async function startServer() {
 
   const app = express();
   const publicDir = join(__dirname, '..', 'public');
-  const buildDir = join(__dirname, '..', 'public', 'build');
   app.use(express.static(publicDir));
-  app.use(express.static(buildDir));
 
   // Optionally server Partytown if found.
   const partytownDir = join(__dirname, '..', 'node_modules', '@builder.io', 'partytown', 'lib');
@@ -33,7 +25,8 @@ async function startServer() {
     app.use('/~partytown', express.static(partytownDir));
   }
 
-  app.get('/', indexHandler);
+  app.get('/', handleQwik);
+
   app.listen(PORT, () => {
     // eslint-disable-next-line no-console
     console.log(`http://localhost:${PORT}/`);

package/starters/apps/starter/src/my-app.qwik.tsx

@@ -1,63 +0,0 @@
-import { h } from '@builder.io/qwik';
-import { qComponent, qHook, useEvent } from '@builder.io/qwik';
-
-export const MyApp = qComponent<{}, { name: string }>({
-  tagName: 'my-app', // optional
-  onMount: qHook(() => ({ name: 'World' })),
-  onRender: qHook((props, state) => {
-    return (
-      <div>
-        <p style={{ 'text-align': 'center' }}>
-          <a href="https://github.com/builderio/qwik">
-            <img
-              alt="Qwik Logo"
-              width={400}
-              src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
-            />
-          </a>
-        </p>
-        <p>Congratulations Qwik is working!</p>
-
-        <p>Next steps:</p>
-        <ol>
-          <li>
-            Open dev-tools network tab and notice that no JavaScript was downloaded to render this
-            page. (Zero JavaScript no matter the size of your app.)
-          </li>
-          <li>
-            Try interacting with this component by changing{' '}
-            <input
-              value={state.name}
-              on:keyup={qHook<typeof MyApp>((props, state) => {
-                const event = useEvent<KeyboardEvent>();
-                const input = event.target as HTMLInputElement;
-                state.name = input.value;
-              })}
-            ></input>
-            .
-          </li>
-          <li>
-            Observe that the binding changes: <code>Hello {state.name}!</code>
-          </li>
-          <li>
-            Notice that Qwik automatically lazily-loaded and hydrated the component upon interaction
-            without the developer having to code that behavior. (Lazy hydration is what gives even
-            large apps instant on behavior.)
-          </li>
-          <li>
-            Read the docs <a href="https://github.com/builderio/qwik">here</a>.
-          </li>
-          <li>Replace the content of this component with your code.</li>
-          <li>Build amazing web-sites with unbeatable startup performance.</li>
-        </ol>
-        <hr />
-        <p style={{ 'text-align': 'center' }}>
-          Made with ❤️ by{' '}
-          <a target="_blank" href="https://www.builder.io/">
-            Builder.io
-          </a>
-        </p>
-      </div>
-    );
-  }),
-});

package/starters/apps/starter-builder/src/my-app.qwik.tsx

@@ -1,34 +0,0 @@
-import { h, Fragment } from '@builder.io/qwik';
-import { qComponent, qHook } from '@builder.io/qwik';
-
-export const Header = qComponent<{}, { name: string }>({
-  onRender: qHook(() => {
-    return (
-      <p style={{ 'text-align': 'center' }}>
-        <a href="https://github.com/builderio/qwik">
-          <img
-            alt="Qwik Logo"
-            width={400}
-            src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
-          />
-        </a>
-      </p>
-    );
-  }),
-});
-
-export const Footer = qComponent<{}, { name: string }>({
-  onRender: qHook(() => {
-    return (
-      <>
-        <hr />
-        <p style={{ 'text-align': 'center' }}>
-          Made with ❤️ by{' '}
-          <a target="_blank" href="https://www.builder.io/">
-            Builder.io
-          </a>
-        </p>
-      </>
-    );
-  }),
-});

package/starters/apps/todo/src/components.qwik.tsx

@@ -1,225 +0,0 @@
-import {
-  Fragment,
-  h,
-  Host,
-  qComponent,
-  qHook,
-  useHostElement,
-  useEvent,
-  notifyRender,
-} from '@builder.io/qwik';
-import {
-  addItem,
-  clearCompleted,
-  FilterStates,
-  getFilteredCount,
-  getFilteredItems,
-  removeItem,
-  TodoItem,
-  Todos,
-  toggleItem,
-  updateFilter,
-} from './state.qwik';
-/* eslint no-console: ["off"] */
-
-// TODO(misko): APIs for better debugger experience: qProps
-// TODO(misko): APIs for better debugger experience: dehydrate
-// TODO(misko): APIs to have a global way of notifying which events are being fired, so we can console out render events in the demo applications
-// TODO(misko): Place breakpoint in DOM modification and notice that too many writes are happening.
-// TODO(misko): <item> renders twice on toggle. 1) Due to state change, 2) due to <main> somehow triggering render.
-
-////////////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Overall application component.
- *
- * This component is static (meaning it will never change). Because of this
- * Qwik knows that it should never need to be rerendered, and its code will never
- * download to the client.
- */
-export const ToDoApp = qComponent<{ todos: Todos }>({
-  tagName: 'todo', // optional
-  onRender: qHook(({ todos }) => {
-    console.log('on:qRender => <ToDoApp/>');
-    return (
-      <section class="todoapp">
-        <Header todos={todos} />
-        <Main todos={todos} />
-        <Footer todos={todos} />
-      </section>
-    );
-  }),
-});
-
-/**
- * Header component which is responsible for providing UI to ender new todo item.
- *
- * This component only rerenders if the user interacts with it through the input.
- */
-export const Header = qComponent<{ todos: Todos }, { text: string }>({
-  tagName: 'header', // optional
-  onMount: qHook(() => ({ text: '' })),
-  onRender: qHook((_, { text }) => {
-    console.log('on:qRender => <Header/>');
-    return (
-      <>
-        <h1>todos</h1>
-        <input
-          class="new-todo"
-          placeholder="What needs to be done?"
-          autoFocus
-          value={text}
-          on:keyup={qHook<typeof Header>(({ todos }, state) => {
-            const event = useEvent<KeyboardEvent>();
-            const inputValue = (event.target as HTMLInputElement).value;
-            state.text = inputValue;
-            if (event.key === 'Enter' && inputValue) {
-              addItem(todos, state.text);
-              state.text = '';
-            }
-          })}
-        />
-      </>
-    );
-  }),
-});
-
-/**
- * Main body of the application which contains the list of todo items.
- *
- * This component only rerenders/hydrates/downloads if the list of todos changes.
- */
-export const Main = qComponent<{ todos: Todos }>({
-  tagName: 'main', // optional
-  onRender: qHook(({ todos }) => {
-    console.log('on:qRender => <Main/>');
-    return (
-      <Host class="main">
-        <ul class="todo-list">
-          {getFilteredItems(todos).map((key) => (
-            <Item item={key} todos={todos} />
-          ))}
-        </ul>
-      </Host>
-    );
-  }),
-});
-
-/**
- * Individual items of the component.
- *
- * It only rerenders if the user infarcts with it or if the item itself changes.
- */
-export const Item = qComponent<{ item: TodoItem; todos: Todos }, { editing: boolean }>({
-  tagName: 'li', // optional
-  onMount: qHook(() => ({ editing: false })),
-  onRender: qHook(({ item }, { editing }) => {
-    console.log(
-      'on:qRender => <Item item="' +
-        JSON.stringify(item, (key, value) => (key.startsWith('__') ? undefined : value)) +
-        '"/>'
-    );
-    return (
-      <Host class={{ completed: item.completed, editing: editing }}>
-        <div class="view">
-          <input
-            class="toggle"
-            type="checkbox"
-            checked={item.completed}
-            on:click={qHook<typeof Item>(({ item, todos }) => toggleItem(todos, item))}
-          />
-          <label
-            on:dblclick={qHook<typeof Item>(async (props, state) => {
-              state.editing = true;
-              const hostElement = useHostElement()!;
-              await notifyRender(hostElement);
-              const inputEl = hostElement.querySelector('input.edit') as HTMLInputElement;
-              inputEl.focus();
-              inputEl.selectionStart = inputEl.selectionEnd = inputEl.value.length;
-            })}
-          >
-            {item.title}
-          </label>
-          <button
-            class="destroy"
-            on:click={qHook<typeof Item>(({ item, todos }) => removeItem(todos, item))}
-          ></button>
-        </div>
-        {editing ? (
-          <input
-            class="edit"
-            value={item.title}
-            on:blur={qHook<typeof Item>((_, state) => (state.editing = false))}
-            on:keyup={qHook<typeof Item>(({ item }, state) => {
-              const event = useEvent<KeyboardEvent>();
-              const inputValue = (event.target as HTMLInputElement).value;
-              item.title = inputValue;
-              if (event.key === 'Enter') {
-                state.editing = false;
-              }
-            })}
-          />
-        ) : null}
-      </Host>
-    );
-  }),
-});
-
-/**
- * Footer showing items remaining and filtering options
- *
- * It only rerenders if the todos count changes or filters are reset.
- */
-export const Footer = qComponent<{ todos: Todos }>({
-  tagName: 'footer', // optional
-  onRender: qHook(({ todos }) => {
-    console.log('on:qRender => <Footer/>');
-    /**
-     * Example of lite-component (it will always be included with the parent component)
-     */
-    function Filter({ filter }: { filter: FilterStates }) {
-      const lMode = filter.toLowerCase();
-      return (
-        <li>
-          <a
-            class={{ selected: todos.filter == lMode }}
-            on:click={qHook<typeof Footer, { filter: FilterStates }>((props, _, { filter }) =>
-              updateFilter(props.todos, filter)
-            ).with({ filter })}
-          >
-            {filter[0].toUpperCase() + filter.substr(1)}
-          </a>
-        </li>
-      );
-    }
-    const remaining = getFilteredCount(todos);
-    return (
-      <Host class="footer">
-        {todos.items.length > 0 ? (
-          <>
-            <span class="todo-count">
-              <strong>{remaining}</strong>
-              {remaining == 1 ? ' item' : ' items'} left
-            </span>
-            <ul class="filters">
-              {FilterStates.map((f) => (
-                <Filter filter={f} />
-              ))}
-            </ul>
-            {remaining > 0 ? (
-              <button
-                class="clear-completed"
-                on:click={qHook<typeof Footer>(({ todos }) => clearCompleted(todos))}
-              >
-                Clear completed
-              </button>
-            ) : null}
-          </>
-        ) : null}
-      </Host>
-    );
-  }),
-});