create-qwik 0.0.107-dev20220902034212 → 0.0.108

package/create-qwik

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 /**
  * @license
- * create-qwik 0.0.107-dev20220902034302
+ * create-qwik 0.0.108-dev20220906124741
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE

package/index.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * create-qwik 0.0.107-dev20220902034302
+ * create-qwik 0.0.108-dev20220906124741
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.107-dev20220902034212",
+  "version": "0.0.108",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

package/starters/apps/base/package.json

@@ -15,12 +15,12 @@
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.107-dev20220902034212",
+    "@builder.io/qwik": "0.0.108",
     "@types/eslint": "8.4.6",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.34.0",
     "@typescript-eslint/parser": "5.34.0",
-    "eslint-plugin-qwik": "0.0.107-dev20220902034212",
+    "eslint-plugin-qwik": "0.0.108",
     "eslint": "8.22.0",
     "node-fetch": "3.2.10",
     "typescript": "4.7.4",

package/starters/apps/perf.prod/package.json

@@ -0,0 +1,22 @@
+{
+  "description": "Blank Qwik starter app.",
+  "scripts": {
+    "build.ssr": "vite build --ssr src/entry.express.tsx",
+    "serve": "node server/entry.express"
+  },
+  "devDependencies": {
+    "@types/express": "4.17.13",
+    "express": "4.17.3"
+  },
+  "type": "module",
+  "__qwik__": {
+    "priority": 0,
+    "featureOptions": [
+      "prettier",
+      "tailwindcss"
+    ],
+    "featureEnabled": [
+      "prettier"
+    ]
+  }
+}

package/starters/apps/perf.prod/src/components/app/app.tsx

@@ -0,0 +1,189 @@
+import { component$, useStore } from '@builder.io/qwik';
+
+let idCounter = 1;
+const adjectives = [
+    'pretty',
+    'large',
+    'big',
+    'small',
+    'tall',
+    'short',
+    'long',
+    'handsome',
+    'plain',
+    'quaint',
+    'clean',
+    'elegant',
+    'easy',
+    'angry',
+    'crazy',
+    'helpful',
+    'mushy',
+    'odd',
+    'unsightly',
+    'adorable',
+    'important',
+    'inexpensive',
+    'cheap',
+    'expensive',
+    'fancy',
+  ],
+  colours = [
+    'red',
+    'yellow',
+    'blue',
+    'green',
+    'pink',
+    'brown',
+    'purple',
+    'brown',
+    'white',
+    'black',
+    'orange',
+  ],
+  nouns = [
+    'table',
+    'chair',
+    'house',
+    'bbq',
+    'desk',
+    'car',
+    'pony',
+    'cookie',
+    'sandwich',
+    'burger',
+    'pizza',
+    'mouse',
+    'keyboard',
+  ];
+
+function _random(max: number) {
+  return Math.round(Math.random() * 1000) % max;
+}
+
+export function buildData(count: number) {
+  const data = new Array(count);
+  for (let i = 0; i < count; i++) {
+    data[i] = {
+      id: idCounter++,
+      label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${
+        nouns[_random(nouns.length)]
+      }`,
+    };
+  }
+  return data;
+}
+
+type BenchState = {
+  data: Array<{ id: number; label: string }>;
+  selected: number | null;
+};
+export const App = component$(() => {
+  const state = useStore<BenchState>({ data: [], selected: null });
+  return (
+    <div class="container">
+      <div class="jumbotron">
+        <div class="row">
+          <div class="col-md-6">
+            <h1>Qwik Keyed</h1>
+          </div>
+          <div class="col-md-6">
+            <div class="row">
+              <div class="col-sm-6 smallpad">
+                <button
+                  id="run"
+                  class="btn btn-primary btn-block"
+                  type="button"
+                  onClick$={() => (state.data = buildData(1000))}
+                >
+                  Create 1,000 rows
+                </button>
+                <button
+                  id="runlots"
+                  class="btn btn-primary btn-block"
+                  type="button"
+                  onClick$={() => (state.data = buildData(10000))}
+                >
+                  Create 10,000 rows
+                </button>
+                <button
+                  id="add"
+                  class="btn btn-primary btn-block"
+                  type="button"
+                  onClick$={() => (state.data = state.data.concat(buildData(1000)))}
+                >
+                  Append 1,000 rows
+                </button>
+                <button
+                  id="update"
+                  class="btn btn-primary btn-block"
+                  type="button"
+                  onClick$={() => {
+                    for (let i = 0, d = state.data, len = d.length; i < len; i += 10) {
+                      d[i].label += ' !!!';
+                    }
+                  }}
+                >
+                  Update every 10th row
+                </button>
+                <button
+                  id="clear"
+                  class="btn btn-primary btn-block"
+                  type="button"
+                  onClick$={() => (state.data = [])}
+                >
+                  Clear
+                </button>
+                <button
+                  id="swaprows"
+                  class="btn btn-primary btn-block"
+                  type="button"
+                  onClick$={() => {
+                    const d = state.data.slice();
+                    if (d.length > 998) {
+                      const tmp = d[1];
+                      d[1] = d[998];
+                      d[998] = tmp;
+                      state.data = d;
+                    }
+                  }}
+                >
+                  Swap Rows
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <table class="table table-hover table-striped test-data">
+        <tbody>
+          {state.data.map(({ id, label }) => {
+            return (
+              <tr key={id} class={id === state.selected ? 'danger' : ''}>
+                <td class="col-md-1">{id}</td>
+                <td class="col-md-4">
+                  <a onClick$={() => alert(label)}>{label}</a>
+                </td>
+                <td class="col-md-1">
+                  <a
+                  // onClick$={() => {
+                  //   const d = state.data;
+                  //   d.splice(
+                  //     d.findIndex((d) => d.id === id),
+                  //     1
+                  //   );
+                  // }}
+                  >
+                    <span class="glyphicon glyphicon-remove" ariaHidden="true" />
+                  </a>
+                </td>
+                <td class="col-md-6" />
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <span class="preloadicon glyphicon glyphicon-remove" ariaHidden="true" />
+    </div>
+  );
+});

package/starters/apps/perf.prod/src/entry.express.tsx

@@ -0,0 +1,59 @@
+import express from 'express';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import render from './entry.ssr';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+/**
+ * Create an express server
+ * https://expressjs.com/
+ */
+const app = express();
+
+/**
+ * Serve static client build files,
+ * hashed filenames, immutable cache-control
+ */
+app.use(
+  '/build',
+  express.static(join(__dirname, '..', 'dist', 'build'), {
+    immutable: true,
+    maxAge: '1y',
+  })
+);
+
+/**
+ * Serve static public files at the root
+ */
+app.use(express.static(join(__dirname, '..', 'dist'), { index: false }));
+
+/**
+ * Server-Side Render Qwik application
+ */
+app.get('/*', async (req, res, next) => {
+  try {
+    // Render the Root component to a string
+    const result = await render({
+      stream: res,
+    });
+
+    // respond with SSR'd HTML
+    if ('html' in result) {
+      res.send((result as any).html);
+    } else {
+      res.end();
+    }
+  } catch (e) {
+    // Error while server-side rendering
+    next(e);
+  }
+});
+
+/**
+ * Start the express server
+ */
+app.listen(8080, () => {
+  /* eslint-disable */
+  console.log(`http://localhost:8080/`);
+});

package/starters/apps/perf.prod/src/entry.ssr.tsx

@@ -0,0 +1,15 @@
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
+import Root from './root';
+
+/**
+ * Server-Side Render method to be called by a server.
+ */
+export default function (opts: RenderToStreamOptions) {
+  // Render the Root component to a string
+  // Pass in the manifest that was generated from the client build
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+  });
+}

package/starters/apps/perf.prod/src/global.css

@@ -0,0 +1,3 @@
+/**
+ * Write here your global css styles
+ */

package/starters/apps/perf.prod/src/root.tsx

@@ -0,0 +1,18 @@
+import { App } from './components/app/app';
+
+import './global.css';
+
+export default () => {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <title>Qwik Blank App</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </head>
+      <body>
+        <App />
+      </body>
+    </html>
+  );
+};

package/starters/apps/qwik-city/package.json

@@ -13,7 +13,7 @@
   },
   "type": "module",
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.107",
+    "@builder.io/qwik-city": "0.0.108",
     "vite-tsconfig-paths": "3.5.0"
   }
 }