create-qwik 2.0.0-beta.1 → 2.0.0-beta.10

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.
@@ -16,18 +16,18 @@
16
16
  "qwik": "qwik"
17
17
  },
18
18
  "devDependencies": {
19
- "@qwik.dev/core": "^2.0.0-beta.1",
20
- "@qwik.dev/router": "^2.0.0-beta.1",
19
+ "@qwik.dev/core": "^2.0.0-beta.10",
20
+ "@qwik.dev/router": "^2.0.0-beta.10",
21
21
  "@eslint/js": "latest",
22
- "@types/node": "20.14.11",
23
- "typescript-eslint": "8.26.1",
24
- "eslint": "9.25.1",
25
- "eslint-plugin-qwik": "^2.0.0-beta.1",
26
- "globals": "16.0.0",
27
- "prettier": "3.4.2",
28
- "typescript": "5.8.2",
22
+ "@types/node": "24.3.0",
23
+ "typescript-eslint": "8.41.0",
24
+ "eslint": "9.33.0",
25
+ "eslint-plugin-qwik": "^2.0.0-beta.10",
26
+ "globals": "16.3.0",
27
+ "prettier": "3.6.2",
28
+ "typescript": "5.9.2",
29
29
  "typescript-plugin-css-modules": "latest",
30
- "vite": "6.2.6",
30
+ "vite": "7.1.5",
31
31
  "vite-tsconfig-paths": "^4.2.1"
32
32
  },
33
33
  "engines": {
@@ -10,12 +10,10 @@
10
10
  * - https://vitejs.dev/config/preview-options.html#preview-options
11
11
  *
12
12
  */
13
- import qwikRouterConfig from "@qwik-router-config";
14
13
  import { createQwikRouter } from "@qwik.dev/router/middleware/node";
15
- // make sure qwikRouterConfig is imported before entry
16
14
  import render from "./entry.ssr";
17
15
 
18
16
  /**
19
17
  * The default export is the QwikRouter adapter used by Vite preview.
20
18
  */
21
- export default createQwikRouter({ render, qwikRouterConfig });
19
+ export default createQwikRouter({ render });
@@ -1,31 +1,31 @@
1
1
  /**
2
2
  * WHAT IS THIS FILE?
3
3
  *
4
- * SSR entry point, in all cases the application is rendered outside the browser, this
5
- * entry point will be the common one.
6
- *
7
- * - Server (express, cloudflare...)
8
- * - npm run start
9
- * - npm run preview
10
- * - npm run build
4
+ * SSR renderer function, used by Qwik Router.
11
5
  *
6
+ * Note that this is the only place the Qwik renderer is called.
7
+ * On the client, containers resume and do not call render.
12
8
  */
13
- import {
14
- renderToStream,
15
- type RenderToStreamOptions,
16
- } from "@qwik.dev/core/server";
9
+ import { createRenderer } from "@qwik.dev/router";
17
10
  import Root from "./root";
18
11
 
19
- export default function (opts: RenderToStreamOptions) {
20
- return renderToStream(<Root />, {
21
- ...opts,
22
- // Use container attributes to set attributes on the html tag.
23
- containerAttributes: {
24
- lang: "en-us",
25
- ...opts.containerAttributes,
26
- },
27
- serverData: {
28
- ...opts.serverData,
12
+ export default createRenderer((opts) => {
13
+ return {
14
+ jsx: <Root />,
15
+ options: {
16
+ ...opts,
17
+ // Use container attributes to set attributes on the html tag.
18
+ containerAttributes: {
19
+ lang: "en-us",
20
+ ...opts.containerAttributes,
21
+ },
22
+ serverData: {
23
+ ...opts.serverData,
24
+ // These are the default values for the document head and are overridden by the `head` exports
25
+ // documentHead: {
26
+ // title: "My App",
27
+ // },
28
+ },
29
29
  },
30
- });
31
- }
30
+ };
31
+ });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "allowJs": true,
4
- "target": "ES2017",
4
+ "target": "ES2020",
5
5
  "module": "ES2022",
6
6
  "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
7
7
  "jsx": "react-jsx",
@@ -1,32 +1,35 @@
1
- import { component$, isDev } from "@qwik.dev/core";
2
- import { QwikRouterProvider, RouterOutlet } from "@qwik.dev/router";
3
- import { RouterHead } from "./components/router-head/router-head";
1
+ import { component$ } from "@qwik.dev/core";
2
+ import {
3
+ DocumentHeadTags,
4
+ RouterOutlet,
5
+ useLocation,
6
+ useQwikRouter,
7
+ } from "@qwik.dev/router";
4
8
 
5
9
  import "./global.css";
6
10
 
7
11
  export default component$(() => {
12
+ useQwikRouter();
13
+ const { url } = useLocation();
14
+
8
15
  /**
9
- * The root of a QwikRouter site always start with the <QwikRouterProvider> component,
10
- * immediately followed by the document's <head> and <body>.
11
- *
12
- * Don't remove the `<head>` and `<body>` elements.
16
+ * This is the root of a QwikRouter site. It contains the document's `<head>` and `<body>`. You can adjust them as you see fit.
13
17
  */
14
18
 
15
19
  return (
16
- <QwikRouterProvider>
20
+ <>
17
21
  <head>
18
22
  <meta charset="utf-8" />
19
- {!isDev && (
20
- <link
21
- rel="manifest"
22
- href={`${import.meta.env.BASE_URL}manifest.json`}
23
- />
24
- )}
25
- <RouterHead />
23
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
24
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
25
+
26
+ <DocumentHeadTags />
27
+
28
+ <link rel="canonical" href={url.href} />
26
29
  </head>
27
- <body lang="en">
30
+ <body>
28
31
  <RouterOutlet />
29
32
  </body>
30
- </QwikRouterProvider>
33
+ </>
31
34
  );
32
35
  });
@@ -45,3 +45,11 @@ The production build should generate the production build of your component libr
45
45
  ```
46
46
  npm run build
47
47
  ```
48
+
49
+ ## sideEffects: false
50
+
51
+ This package is configured with "sideEffects": false in its package.json.<br/>
52
+ This tells bundlers that the module [has no side effects](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) when imported.<br/>
53
+ Consequently, to maintain the integrity of tree-shaking optimizations, please ensure your code truly contains no side effects (such as modifying global variables or the DOM upon import).<br/>
54
+ If your module does introduce side effects, remove "sideEffects": false or specify the specific files with side effects.<br/>
55
+ Be sure to only remove it from the specific file where the global is being set. Finally, verify that your build continues to function as expected after making any adjustments to the sideEffects setting.
@@ -33,17 +33,17 @@
33
33
  "release": "np"
34
34
  },
35
35
  "devDependencies": {
36
- "@qwik.dev/core": "2.0.0-beta.1",
36
+ "@qwik.dev/core": "2.0.0-beta.10",
37
37
  "@eslint/js": "latest",
38
- "@types/node": "20.14.11",
39
- "typescript-eslint": "8.26.1",
40
- "eslint": "9.25.1",
41
- "eslint-plugin-qwik": "2.0.0-beta.1",
42
- "globals": "16.0.0",
38
+ "@types/node": "24.3.0",
39
+ "typescript-eslint": "8.41.0",
40
+ "eslint": "9.33.0",
41
+ "eslint-plugin-qwik": "2.0.0-beta.10",
42
+ "globals": "16.3.0",
43
43
  "np": "^8.0.4",
44
- "prettier": "3.4.2",
45
- "typescript": "5.8.2",
46
- "vite": "6.2.6",
44
+ "prettier": "3.6.2",
45
+ "typescript": "5.9.2",
46
+ "vite": "7.1.5",
47
47
  "vite-tsconfig-paths": "^4.2.1"
48
48
  },
49
49
  "__qwik__": {
@@ -52,5 +52,6 @@
52
52
  "docs": [
53
53
  "https://qwik.dev/docs/getting-started/"
54
54
  ]
55
- }
55
+ },
56
+ "sideEffects": false
56
57
  }
@@ -6,9 +6,15 @@ export default () => {
6
6
  <>
7
7
  <head>
8
8
  <meta charset="utf-8" />
9
- <title>Qwik Blank App</title>
9
+ <title>Qwik Library Starter</title>
10
10
  </head>
11
11
  <body>
12
+ <h1>Qwik Library Starter</h1>
13
+ <p>
14
+ This is a Qwik library starter. Make your components and export them
15
+ from `src/index.ts`. This playground app will not be bundled with your
16
+ library.
17
+ </p>
12
18
  <Logo />
13
19
  <Counter />
14
20
  </body>
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "allowJs": true,
4
- "target": "ES2017",
4
+ "target": "ES2020",
5
5
  "module": "ES2020",
6
6
  "lib": ["es2020", "DOM"],
7
7
  "jsx": "react-jsx",
@@ -12,8 +12,9 @@ export default defineConfig(() => {
12
12
  build: {
13
13
  target: "es2020",
14
14
  lib: {
15
- entry: "./src/index.ts",
16
- formats: ["es", "cjs"],
15
+ entry: "./src/index",
16
+ formats: ["es", "cjs"] as const,
17
+ // This adds .qwik so all files are processed by the optimizer
17
18
  fileName: (format, entryName) =>
18
19
  `${entryName}.qwik.${format === "es" ? "mjs" : "cjs"}`,
19
20
  },
@@ -1,32 +1,35 @@
1
- import { component$, isDev } from "@qwik.dev/core";
2
- import { QwikRouterProvider, RouterOutlet } from "@qwik.dev/router";
3
- import { RouterHead } from "./components/router-head/router-head";
1
+ import { component$ } from "@qwik.dev/core";
2
+ import {
3
+ DocumentHeadTags,
4
+ RouterOutlet,
5
+ useLocation,
6
+ useQwikRouter,
7
+ } from "@qwik.dev/router";
4
8
 
5
9
  import "./global.css";
6
10
 
7
11
  export default component$(() => {
12
+ useQwikRouter();
13
+ const { url } = useLocation();
14
+
8
15
  /**
9
- * The root of a QwikRouter site always start with the <QwikRouterProvider> component,
10
- * immediately followed by the document's <head> and <body>.
11
- *
12
- * Don't remove the `<head>` and `<body>` elements.
16
+ * This is the root of a QwikRouter site. It contains the document's `<head>` and `<body>`. You can adjust them as you see fit.
13
17
  */
14
18
 
15
19
  return (
16
- <QwikRouterProvider>
20
+ <>
17
21
  <head>
18
22
  <meta charset="utf-8" />
19
- {!isDev && (
20
- <link
21
- rel="manifest"
22
- href={`${import.meta.env.BASE_URL}manifest.json`}
23
- />
24
- )}
25
- <RouterHead />
23
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
24
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
25
+
26
+ <DocumentHeadTags />
27
+
28
+ <link rel="canonical" href={url.href} />
26
29
  </head>
27
- <body lang="en">
30
+ <body>
28
31
  <RouterOutlet />
29
32
  </body>
30
- </QwikRouterProvider>
33
+ </>
31
34
  );
32
35
  });
@@ -16,7 +16,6 @@ export default component$(() => {
16
16
  number: 20,
17
17
  });
18
18
 
19
- // eslint-disable-next-line qwik/no-use-visible-task
20
19
  useVisibleTask$(({ cleanup }) => {
21
20
  const timeout = setTimeout(() => (state.count = 1), 500);
22
21
  cleanup(() => clearTimeout(timeout));
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "create-qwik",
3
3
  "description": "Interactive CLI for create Qwik projects and adding features.",
4
- "version": "2.0.0-beta.1",
4
+ "version": "2.0.0-beta.10",
5
5
  "author": "Qwik Team",
6
6
  "bin": "./create-qwik.cjs",
7
7
  "bugs": "https://github.com/QwikDev/qwik/issues",
8
8
  "devDependencies": {
9
- "@clack/prompts": "0.7.0",
10
- "@types/yargs": "17.0.32",
9
+ "@clack/prompts": "0.11.0",
10
+ "@types/yargs": "17.0.33",
11
11
  "kleur": "4.1.5",
12
12
  "yargs": "17.7.2"
13
13
  },
@@ -1,17 +0,0 @@
1
- /*
2
- * WHAT IS THIS FILE?
3
- *
4
- * Development entry point using only client-side modules:
5
- * - Do not use this mode in production!
6
- * - No SSR
7
- * - No portion of the application is pre-rendered on the server.
8
- * - All of the application is running eagerly in the browser.
9
- * - More code is transferred to the browser than in SSR mode.
10
- * - Optimizer/Serialization/Deserialization code is not exercised!
11
- */
12
- import { render, type RenderOptions } from "@qwik.dev/core";
13
- import Root from "./root";
14
-
15
- export default function (opts: RenderOptions) {
16
- return render(document, <Root />, opts);
17
- }
@@ -1,9 +0,0 @@
1
- {
2
- "$schema": "https://json.schemastore.org/web-manifest-combined.json",
3
- "name": "qwik-project-name",
4
- "short_name": "Welcome to Qwik",
5
- "start_url": ".",
6
- "display": "standalone",
7
- "background_color": "#fff",
8
- "description": "A Qwik project app."
9
- }
@@ -1,32 +0,0 @@
1
- import { useDocumentHead, useLocation } from "@qwik.dev/router";
2
- import { component$ } from "@qwik.dev/core";
3
-
4
- /**
5
- * The RouterHead component is placed inside of the document `<head>` element.
6
- */
7
- export const RouterHead = component$(() => {
8
- const head = useDocumentHead();
9
- const loc = useLocation();
10
-
11
- return (
12
- <>
13
- <title>{head.title}</title>
14
-
15
- <link rel="canonical" href={loc.url.href} />
16
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
18
-
19
- {head.meta.map((m) => (
20
- <meta key={m.key} {...m} />
21
- ))}
22
-
23
- {head.links.map((l) => (
24
- <link key={l.key} {...l} />
25
- ))}
26
-
27
- {head.styles.map((s) => (
28
- <style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
29
- ))}
30
- </>
31
- );
32
- });
@@ -1,17 +0,0 @@
1
- /*
2
- * WHAT IS THIS FILE?
3
- *
4
- * Development entry point using only client-side modules:
5
- * - Do not use this mode in production!
6
- * - No SSR
7
- * - No portion of the application is pre-rendered on the server.
8
- * - All of the application is running eagerly in the browser.
9
- * - More code is transferred to the browser than in SSR mode.
10
- * - Optimizer/Serialization/Deserialization code is not exercised!
11
- */
12
- import { render, type RenderOptions } from "@qwik.dev/core";
13
- import Root from "./root";
14
-
15
- export default function (opts: RenderOptions) {
16
- return render(document, <Root />, opts);
17
- }
@@ -1,21 +0,0 @@
1
- /**
2
- * WHAT IS THIS FILE?
3
- *
4
- * SSR entry point, in all cases the application is rendered outside the browser, this
5
- * entry point will be the common one.
6
- *
7
- * - Server (express, cloudflare...)
8
- * - npm run start
9
- * - npm run preview
10
- * - npm run build
11
- *
12
- */
13
- import {
14
- renderToStream,
15
- type RenderToStreamOptions,
16
- } from "@qwik.dev/core/server";
17
- import Root from "./root";
18
-
19
- export default function (opts: RenderToStreamOptions) {
20
- return renderToStream(<Root />, opts);
21
- }
@@ -1,37 +0,0 @@
1
- import { useDocumentHead, useLocation } from "@qwik.dev/router";
2
-
3
- import { component$ } from "@qwik.dev/core";
4
-
5
- /**
6
- * The RouterHead component is placed inside of the document `<head>` element.
7
- */
8
- export const RouterHead = component$(() => {
9
- const head = useDocumentHead();
10
- const loc = useLocation();
11
-
12
- return (
13
- <>
14
- <title>{head.title}</title>
15
-
16
- <link rel="canonical" href={loc.url.href} />
17
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19
-
20
- {head.meta.map((m) => (
21
- <meta key={m.key} {...m} />
22
- ))}
23
-
24
- {head.links.map((l) => (
25
- <link key={l.key} {...l} />
26
- ))}
27
-
28
- {head.styles.map((s) => (
29
- <style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
30
- ))}
31
-
32
- {head.scripts.map((s) => (
33
- <script key={s.key} {...s.props} dangerouslySetInnerHTML={s.script} />
34
- ))}
35
- </>
36
- );
37
- });