npm - create-qwik - Versions diffs - 0.0.1 → 0.0.5 - Mend

create-qwik 0.0.1 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/README.md +23 -6
package/index.js +106 -1
package/package.json +17 -25
package/starters/apps/starter/README.md +3 -0
package/starters/apps/starter/package.json +25 -0
package/starters/apps/starter/rollup.config.js +30 -0
package/starters/apps/starter/src/index.server.qwik.tsx +31 -0
package/starters/apps/starter/src/my-app.qwik.tsx +63 -0
package/starters/apps/starter/tsconfig.json +16 -0
package/starters/apps/starter-builder/README.md +3 -0
package/starters/apps/starter-builder/package.json +25 -0
package/starters/apps/starter-builder/rollup.config.js +30 -0
package/starters/apps/starter-builder/src/index.server.qwik.tsx +46 -0
package/starters/apps/starter-builder/src/my-app.qwik.tsx +34 -0
package/starters/apps/starter-builder/tsconfig.json +16 -0
package/starters/apps/starter-partytown/README.md +3 -0
package/starters/apps/starter-partytown/package.json +28 -0
package/starters/apps/starter-partytown/rollup.config.js +30 -0
package/starters/apps/starter-partytown/src/index.server.qwik.tsx +49 -0
package/starters/apps/starter-partytown/src/my-app.qwik.tsx +103 -0
package/starters/apps/starter-partytown/tsconfig.json +16 -0
package/starters/apps/todo/README.md +3 -0
package/starters/apps/todo/package.json +25 -0
package/starters/apps/todo/public/base.css +141 -0
package/starters/apps/todo/public/index.css +376 -0
package/starters/apps/todo/rollup.config.js +30 -0
package/starters/apps/todo/src/components.qwik.tsx +225 -0
package/starters/apps/todo/src/index.server.qwik.tsx +43 -0
package/starters/apps/todo/src/state.qwik.ts +64 -0
package/starters/apps/todo/tsconfig.json +16 -0
package/starters/servers/express/package.json +10 -0
package/starters/servers/express/server/index.js +43 -0
package/LICENSE +0 -21

package/starters/apps/starter-builder/rollup.config.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { qwikRollup } from '@builder.io/qwik/optimizer';
+import typescript from '@rollup/plugin-typescript';
+export default async function () {
+  return {
+    input: [
+      'src/index.server.qwik.tsx',
+      'src/my-app.qwik.tsx'
+    ],
+    plugins: [
+      nodeResolve(),
+      qwikRollup({
+        symbolsPath: 'q-symbols.json',
+      }),
+      typescript(),
+    ],
+    output: [
+      {
+        chunkFileNames: 'q-[hash].js',
+        dir: 'public/build',
+        format: 'es',
+      },
+      {
+        dir: 'server/build',
+        format: 'cjs',
+      },
+    ],
+  };
+}

package/starters/apps/starter-builder/src/index.server.qwik.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * 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
+ */
+import { h } from '@builder.io/qwik';
+import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
+import { Footer, Header } from './my-app.qwik';
+/**
+ * Entry point for server-side pre-rendering.
+ *
+ * @returns a promise when all of the rendering is completed.
+ */
+export default function serverRender(opts: RenderToStringOptions) {
+  return renderToString(
+    <html>
+      <head>
+        <title>Qwik Blank App</title>
+      </head>
+      <body>
+        <Header />
+        <div id="my-content"></div>
+        <Footer />
+        <script>({fetchQwikBuilderContent.toString()})();</script>
+        <QwikLoader debug={opts.debug} />
+      </body>
+    </html>,
+    opts
+  );
+}
+const fetchQwikBuilderContent = async () => {
+  const qwikUrl = new URL('https://qa.builder.io/api/v1/qwik/page');
+  // Demo API key for demonstration only. Please replace with your key
+  qwikUrl.searchParams.set('apiKey', '5b8073f890b043be81574f96cfd1250b');
+  qwikUrl.searchParams.set('userAttributes.urlPath', location.pathname);
+  const response = await fetch(String(qwikUrl));
+  const { html } = await response.json();
+  document.querySelector('#my-content')!.innerHTML = html;
+};

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

@@ -0,0 +1,34 @@
+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/starter-builder/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ES2020",
+    "lib": ["es2020", "DOM"],
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true
+  },
+  "include": ["src"]
+}

package/starters/apps/starter-partytown/README.md ADDED Viewed

@@ -0,0 +1,3 @@
+# Qwik + Partytown Starter
+Barebones Qwik + Partytown starter app for you.

package/starters/apps/starter-partytown/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "qwik-starter-partytown",
+  "version": "0.0.1",
+  "description": "Blank starter app with Partytown",
+  "scripts": {
+    "build": "npm run clean && rollup -c",
+    "clean": "rimraf */build/",
+    "start": "npm run clean && concurrently -c blue,green \"rollup -c --configDev --watch\" \"wait-on public/build && npm run serve\""
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "~0.0.15",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "concurrently": "^6.4.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.59.0",
+    "typescript": "^4.5.2",
+    "wait-on": "^6.0.0"
+  },
+  "author": "Builder.io Team",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.14.0"
+  },
+  "dependencies": {
+    "@builder.io/partytown": "^0.0.22"
+  }
+}

package/starters/apps/starter-partytown/rollup.config.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { qwikRollup } from '@builder.io/qwik/optimizer';
+import typescript from '@rollup/plugin-typescript';
+export default async function () {
+  return {
+    input: [
+      'src/index.server.qwik.tsx',
+      'src/my-app.qwik.tsx'
+    ],
+    plugins: [
+      nodeResolve(),
+      qwikRollup({
+        symbolsPath: 'q-symbols.json',
+      }),
+      typescript(),
+    ],
+    output: [
+      {
+        chunkFileNames: 'q-[hash].js',
+        dir: 'public/build',
+        format: 'es',
+      },
+      {
+        dir: 'server/build',
+        format: 'cjs',
+      },
+    ],
+  };
+}

package/starters/apps/starter-partytown/src/index.server.qwik.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * 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
+ */
+import { h } from '@builder.io/qwik';
+import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
+import { MyApp } from './my-app.qwik';
+/**
+ * Entry point for server-side pre-rendering.
+ *
+ * @returns a promise when all of the rendering is completed.
+ */
+export default function serverRender(opts: RenderToStringOptions) {
+  return renderToString(
+    <html>
+      <head>
+        <title>Qwik + Partytown Blank App</title>
+        <script defer async src="~partytown/debug/partytown.js"></script>
+      </head>
+      <body>
+        <MyApp />
+        <script type="text/partytown">
+          ({partyTownExampleWhichBlocksMainThreadForOneSecond.toString()})()
+        </script>
+        <QwikLoader debug={opts.debug} events={['click', 'keyup', 'expensive-computation-done']} />
+      </body>
+    </html>,
+    opts
+  );
+}
+function partyTownExampleWhichBlocksMainThreadForOneSecond() {
+  // Block execution for 1 second.
+  const start = new Date().getTime();
+  // eslint-disable-next-line no-console
+  console.log('Expensive computation started at:', start);
+  let end = 0;
+  while (end < start + 2500) {
+    end = new Date().getTime();
+  }
+  // eslint-disable-next-line no-console
+  console.log('Expensive computation ended at:', end);
+  document.dispatchEvent(new Event('expensive-computation-done', { bubbles: true }));
+}

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

@@ -0,0 +1,103 @@
+import { h, qEvent } from '@builder.io/qwik';
+import { qComponent, qHook, useEvent } from '@builder.io/qwik';
+export const expensiveComputationDone = qEvent('document:expensiveComputationDone');
+export const MyApp = qComponent<{}, { name: string; running: boolean }>({
+  tagName: 'my-app', // optional
+  onMount: qHook(() => ({ name: 'World', running: true })),
+  onRender: qHook((props, state) => {
+    // eslint-disable-next-line no-console
+    console.log('Qwik: MyApp component is rendering...');
+    return (
+      <div
+        id="my-app"
+        {...expensiveComputationDone(
+          qHook<typeof MyApp>((props, state) => (state.running = false))
+        )}
+      >
+        <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 <a href="https://github.com/builderio/qwik">Qwik</a> with{' '}
+          <a href="https://github.com/BuilderIO/partytown">Partytown</a> is working!
+        </p>
+        <p>
+          Expensive script running in <a href="https://github.com/BuilderIO/partytown">Partytown</a>{' '}
+          is{' '}
+          {state.running ? (
+            <span style={{ 'background-color': 'red', color: 'white', padding: '.1em' }}>
+              running
+            </span>
+          ) : (
+            <span style={{ 'background-color': 'green', color: 'white', padding: '.1em' }}>
+              finished
+            </span>
+          )}
+          .
+        </p>
+        <p>Next steps:</p>
+        <ol>
+          <li>
+            Open dev-tools network tab and notice that no JavaScript was downloaded by the main
+            thread to render this page. (<code>partytown.js</code> is used to execute things of main
+            thread and not for rendering the application.)
+          </li>
+          <li>
+            Partytown executes <code>&lt;script&gt;</code> tag that contains a simulation of
+            expensive script. The expensive script simplation keeps the web-worker thread busy for
+            2.5 seconds, leaving main-thread free for user interactions. (Without Partytown the
+            script would block the main thread resulting in poor user experience.)
+          </li>
+          <li>
+            Once the expensive operation is finished it dispatches custom event (
+            <code>expensivecomputationdone</code>) that this component listens on. It is only at
+            that time that Qwik lazy-loads the component render function and updates the UI. (See
+            network tab.)
+          </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-partytown/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ES2020",
+    "lib": ["es2020", "DOM"],
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true
+  },
+  "include": ["src"]
+}

package/starters/apps/todo/README.md ADDED Viewed

@@ -0,0 +1,3 @@
+# Qwik Todo
+Qwik based implementation of TodoMVC: https://todomvc.com/

package/starters/apps/todo/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "qwik-todo-express",
+  "version": "0.0.1",
+  "description": "Classic Todo MVC app",
+  "scripts": {
+    "build": "npm run clean && rollup -c",
+    "clean": "rimraf */build/",
+    "start": "npm run clean && concurrently -c blue,green \"rollup -c --configDev --watch\" \"wait-on public/build && npm run serve\""
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "~0.0.15",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "concurrently": "^6.4.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.59.0",
+    "typescript": "^4.5.2",
+    "wait-on": "^6.0.0"
+  },
+  "author": "Builder.io Team",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.14.0"
+  }
+}

package/starters/apps/todo/public/base.css ADDED Viewed

@@ -0,0 +1,141 @@
+hr {
+  margin: 20px 0;
+  border: 0;
+  border-top: 1px dashed #c5c5c5;
+  border-bottom: 1px dashed #f7f7f7;
+}
+.learn a {
+  font-weight: normal;
+  text-decoration: none;
+  color: #b83f45;
+}
+.learn a:hover {
+  text-decoration: underline;
+  color: #787e7e;
+}
+.learn h3,
+.learn h4,
+.learn h5 {
+  margin: 10px 0;
+  font-weight: 500;
+  line-height: 1.2;
+  color: #000;
+}
+.learn h3 {
+  font-size: 24px;
+}
+.learn h4 {
+  font-size: 18px;
+}
+.learn h5 {
+  margin-bottom: 0;
+  font-size: 14px;
+}
+.learn ul {
+  padding: 0;
+  margin: 0 0 30px 25px;
+}
+.learn li {
+  line-height: 20px;
+}
+.learn p {
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 1.3;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+#issue-count {
+  display: none;
+}
+.quote {
+  border: none;
+  margin: 20px 0 60px 0;
+}
+.quote p {
+  font-style: italic;
+}
+.quote p:before {
+  content: '“';
+  font-size: 50px;
+  opacity: 0.15;
+  position: absolute;
+  top: -20px;
+  left: 3px;
+}
+.quote p:after {
+  content: '”';
+  font-size: 50px;
+  opacity: 0.15;
+  position: absolute;
+  bottom: -42px;
+  right: 3px;
+}
+.quote footer {
+  position: absolute;
+  bottom: -40px;
+  right: 0;
+}
+.quote footer img {
+  border-radius: 3px;
+}
+.quote footer a {
+  margin-left: 5px;
+  vertical-align: middle;
+}
+.speech-bubble {
+  position: relative;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 5px;
+}
+.speech-bubble:after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 30px;
+  border: 13px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.04);
+}
+.learn-bar > .learn {
+  position: absolute;
+  width: 272px;
+  top: 8px;
+  left: -300px;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.6);
+  transition-property: left;
+  transition-duration: 500ms;
+}
+@media (min-width: 899px) {
+  .learn-bar {
+    width: auto;
+    padding-left: 300px;
+  }
+  .learn-bar > .learn {
+    left: 8px;
+  }
+}