create-qwik 0.0.42 → 0.0.100-dev20220820024200

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 (38) hide show
  1. package/create-qwik +1 -1
  2. package/index.js +1 -1
  3. package/package.json +1 -1
  4. package/starters/apps/base/.vscode/qwik.code-snippets +4 -4
  5. package/starters/apps/base/package.json +2 -2
  6. package/starters/apps/base/src/root.tsx +1 -0
  7. package/starters/apps/blank/src/components/app/app.tsx +4 -4
  8. package/starters/apps/blank/src/components/logo/logo.tsx +3 -3
  9. package/starters/apps/blank/src/root.tsx +1 -0
  10. package/starters/apps/library/src/components/logo/logo.tsx +3 -3
  11. package/starters/apps/qwik-city/package.json +1 -2
  12. package/starters/apps/qwik-city/src/components/breadcrumbs/breadcrumbs.tsx +17 -20
  13. package/starters/apps/qwik-city/src/components/footer/footer.tsx +24 -29
  14. package/starters/apps/qwik-city/src/components/head/head.tsx +29 -32
  15. package/starters/apps/qwik-city/src/components/header/header.tsx +31 -36
  16. package/starters/apps/qwik-city/src/components/menu/menu.tsx +31 -34
  17. package/starters/apps/qwik-city/src/root.tsx +9 -7
  18. package/starters/apps/qwik-city/src/routes/about-us/index.tsx +3 -3
  19. package/starters/apps/qwik-city/src/routes/api/index@api.tsx +3 -3
  20. package/starters/apps/qwik-city/src/routes/api/layout-api.tsx +3 -3
  21. package/starters/apps/qwik-city/src/routes/blog/[...slug]/index.tsx +3 -3
  22. package/starters/apps/qwik-city/src/routes/blog/layout.tsx +3 -3
  23. package/starters/apps/qwik-city/src/routes/dashboard/index.tsx +3 -3
  24. package/starters/apps/qwik-city/src/routes/dashboard/layout!.tsx +3 -3
  25. package/starters/apps/qwik-city/src/routes/dashboard/profile/index.tsx +3 -3
  26. package/starters/apps/qwik-city/src/routes/dashboard/settings/index.tsx +3 -3
  27. package/starters/apps/qwik-city/src/routes/docs/[category]/[id]/index.tsx +3 -3
  28. package/starters/apps/qwik-city/src/routes/docs/index.tsx +3 -3
  29. package/starters/apps/qwik-city/src/routes/docs/layout!.tsx +3 -3
  30. package/starters/apps/qwik-city/src/routes/index.tsx +3 -3
  31. package/starters/apps/qwik-city/src/routes/layout.tsx +3 -3
  32. package/starters/apps/qwik-city/src/routes/products/[id]/index.tsx +3 -3
  33. package/starters/servers/cloudflare-pages/functions/[[path]].ts +1 -1
  34. package/starters/servers/express/src/entry.express.tsx +4 -4
  35. package/starters/servers/netlify-edge/README.md +6 -3
  36. package/starters/servers/netlify-edge/netlify.toml +7 -0
  37. package/starters/servers/netlify-edge/package.json +1 -1
  38. package/starters/apps/qwik-city/src/components/body/body.tsx +0 -15
package/create-qwik CHANGED
@@ -1,7 +1,7 @@
1
1
  #!/usr/bin/env node
2
2
  "use strict";/**
3
3
  * @license
4
- * create-qwik 0.0.42-dev20220810113649
4
+ * create-qwik 0.0.100-dev20220820024308
5
5
  * Copyright Builder.io, Inc. All Rights Reserved.
6
6
  * Use of this source code is governed by an MIT-style license that can be
7
7
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
package/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";/**
2
2
  * @license
3
- * create-qwik 0.0.42-dev20220810113649
3
+ * create-qwik 0.0.100-dev20220820024308
4
4
  * Copyright Builder.io, Inc. All Rights Reserved.
5
5
  * Use of this source code is governed by an MIT-style license that can be
6
6
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-qwik",
3
- "version": "0.0.42",
3
+ "version": "0.0.100-dev20220820024200",
4
4
  "description": "Interactive CLI and API for generating Qwik projects.",
5
5
  "bin": "create-qwik",
6
6
  "main": "index.js",
@@ -14,11 +14,11 @@
14
14
  " });",
15
15
  " $0",
16
16
  " return (",
17
- " <Host>",
17
+ " <div>",
18
18
  " <button onClick$={() => state.count += props.step}>",
19
19
  " {state.count}",
20
20
  " </button>",
21
- " </Host>",
21
+ " </div>",
22
22
  " );",
23
23
  "});"
24
24
  ]
@@ -30,11 +30,11 @@
30
30
  "body": [
31
31
  "export const ${1:MyCmp} = component$(() => {",
32
32
  " return (",
33
- " <Host>",
33
+ " <div>",
34
34
  " <div>",
35
35
  " ${1:MyCmp}",
36
36
  " </div>",
37
- " </Host>",
37
+ " </div>",
38
38
  " );",
39
39
  "});"
40
40
  ]
@@ -15,12 +15,12 @@
15
15
  "typecheck": "tsc --incremental --noEmit"
16
16
  },
17
17
  "devDependencies": {
18
- "@builder.io/qwik": "0.0.42",
18
+ "@builder.io/qwik": "0.0.100-dev20220820024200",
19
19
  "@types/eslint": "8.4.5",
20
20
  "@types/node": "latest",
21
21
  "@typescript-eslint/eslint-plugin": "5.30.7",
22
22
  "@typescript-eslint/parser": "5.30.7",
23
- "eslint-plugin-qwik": "0.0.42",
23
+ "eslint-plugin-qwik": "0.0.100-dev20220820024200",
24
24
  "eslint": "8.20.0",
25
25
  "node-fetch": "3.2.9",
26
26
  "typescript": "4.7.4",
@@ -6,6 +6,7 @@ export default () => {
6
6
  <head>
7
7
  <meta charSet="utf-8" />
8
8
  <title>Qwik Blank App</title>
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
10
  </head>
10
11
  <body></body>
11
12
  </html>
@@ -1,11 +1,11 @@
1
- import { useStore, component$, Host } from '@builder.io/qwik';
1
+ import { useStore, component$ } from '@builder.io/qwik';
2
2
  import { Logo } from '../logo/logo';
3
3
 
4
4
  export const App = component$(() => {
5
5
  const state = useStore({ name: 'World' });
6
6
  return (
7
- <Host class="my-app p-20">
8
- <Logo class="mb-10" />
7
+ <div class="my-app p-20">
8
+ <Logo />
9
9
 
10
10
  <h1 class="text-3xl mb-2">Congratulations Qwik is working!</h1>
11
11
 
@@ -49,6 +49,6 @@ export const App = component$(() => {
49
49
  Builder.io
50
50
  </a>
51
51
  </p>
52
- </Host>
52
+ </div>
53
53
  );
54
54
  });
@@ -1,8 +1,8 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
 
3
3
  export const Logo = component$(() => {
4
4
  return (
5
- <Host style={{ 'text-align': 'center' }}>
5
+ <div style={{ 'text-align': 'center' }}>
6
6
  <a href="https://qwik.builder.io/">
7
7
  <img
8
8
  alt="Qwik Logo"
@@ -11,6 +11,6 @@ export const Logo = component$(() => {
11
11
  src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
12
12
  />
13
13
  </a>
14
- </Host>
14
+ </div>
15
15
  );
16
16
  });
@@ -8,6 +8,7 @@ export default () => {
8
8
  <head>
9
9
  <meta charSet="utf-8" />
10
10
  <title>Qwik Blank App</title>
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
11
12
  </head>
12
13
  <body>
13
14
  <App />
@@ -1,8 +1,8 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
 
3
3
  export const Logo = component$(() => {
4
4
  return (
5
- <Host style={{ 'text-align': 'center' }}>
5
+ <logo style={{ 'text-align': 'center' }}>
6
6
  <a href="https://qwik.builder.io/">
7
7
  <img
8
8
  alt="Qwik Logo"
@@ -11,6 +11,6 @@ export const Logo = component$(() => {
11
11
  src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
12
12
  />
13
13
  </a>
14
- </Host>
14
+ </logo>
15
15
  );
16
16
  });
@@ -5,7 +5,6 @@
5
5
  "selectServer": true,
6
6
  "featureOptions": [
7
7
  "prettier",
8
- "react",
9
8
  "tailwindcss"
10
9
  ],
11
10
  "featureEnabled": [
@@ -14,7 +13,7 @@
14
13
  },
15
14
  "type": "module",
16
15
  "devDependencies": {
17
- "@builder.io/qwik-city": "0.0.33",
16
+ "@builder.io/qwik-city": "0.0.101",
18
17
  "vite-tsconfig-paths": "3.5.0"
19
18
  }
20
19
  }
@@ -1,29 +1,26 @@
1
- import { component$, Host, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, useStyles$ } from '@builder.io/qwik';
2
2
  import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
3
3
  import styles from './breadcrumbs.css?inline';
4
4
 
5
- export const Breadcrumbs = component$(
6
- () => {
7
- useStyles$(styles);
5
+ export const Breadcrumbs = component$(() => {
6
+ useStyles$(styles);
8
7
 
9
- const { menu } = useContent();
10
- const loc = useLocation();
8
+ const { menu } = useContent();
9
+ const loc = useLocation();
11
10
 
12
- const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
13
- if (breadcrumbs.length === 0) {
14
- return null;
15
- }
11
+ const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
12
+ if (breadcrumbs.length === 0) {
13
+ return null;
14
+ }
16
15
 
17
- return (
18
- <Host class="breadcrumbs">
19
- {breadcrumbs.map((b) => (
20
- <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
21
- ))}
22
- </Host>
23
- );
24
- },
25
- { tagName: 'nav' }
26
- );
16
+ return (
17
+ <nav class="breadcrumbs">
18
+ {breadcrumbs.map((b) => (
19
+ <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
20
+ ))}
21
+ </nav>
22
+ );
23
+ });
27
24
 
28
25
  export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
29
26
  if (menu?.items) {
@@ -1,32 +1,27 @@
1
- import { component$, Host, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, useStyles$ } from '@builder.io/qwik';
2
2
  import styles from './footer.css?inline';
3
3
 
4
- export default component$(
5
- () => {
6
- useStyles$(styles);
4
+ export default component$(() => {
5
+ useStyles$(styles);
7
6
 
8
- return (
9
- <Host>
10
- <ul>
11
- <li>
12
- <a href="/blog">Blog</a>
13
- </li>
14
- <li>
15
- <a href="/docs">Docs</a>
16
- </li>
17
- <li>
18
- <a href="/about-us">About Us</a>
19
- </li>
20
- <li>
21
- <a class="footer-home" href="/">
22
- Home
23
- </a>
24
- </li>
25
- </ul>
26
- </Host>
27
- );
28
- },
29
- {
30
- tagName: 'footer',
31
- }
32
- );
7
+ return (
8
+ <footer>
9
+ <ul>
10
+ <li>
11
+ <a href="/blog">Blog</a>
12
+ </li>
13
+ <li>
14
+ <a href="/docs">Docs</a>
15
+ </li>
16
+ <li>
17
+ <a href="/about-us">About Us</a>
18
+ </li>
19
+ <li>
20
+ <a class="footer-home" href="/">
21
+ Home
22
+ </a>
23
+ </li>
24
+ </ul>
25
+ </footer>
26
+ );
27
+ });
@@ -3,35 +3,32 @@ import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
3
3
  import { Analytics } from './analytics';
4
4
  import { Social } from './social';
5
5
 
6
- export const Head = component$(
7
- () => {
8
- const head = useDocumentHead();
9
- const loc = useLocation();
10
-
11
- return (
12
- <>
13
- <meta charSet="utf-8" />
14
-
15
- <title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
16
-
17
- <link rel="canonical" href={loc.href} />
18
-
19
- {head.meta.map((m) => (
20
- <meta {...m} />
21
- ))}
22
-
23
- {head.links.map((l) => (
24
- <link {...l} />
25
- ))}
26
-
27
- {head.styles.map((s) => (
28
- <style {...s.props} dangerouslySetInnerHTML={s.style} />
29
- ))}
30
-
31
- <Social />
32
- <Analytics loc={loc} />
33
- </>
34
- );
35
- },
36
- { tagName: 'head' }
37
- );
6
+ export const Head = component$(() => {
7
+ const head = useDocumentHead();
8
+ const loc = useLocation();
9
+
10
+ return (
11
+ <head>
12
+ <meta charSet="utf-8" />
13
+
14
+ <title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16
+ <link rel="canonical" href={loc.href} />
17
+
18
+ {head.meta.map((m) => (
19
+ <meta {...m} />
20
+ ))}
21
+
22
+ {head.links.map((l) => (
23
+ <link {...l} />
24
+ ))}
25
+
26
+ {head.styles.map((s) => (
27
+ <style {...s.props} dangerouslySetInnerHTML={s.style} />
28
+ ))}
29
+
30
+ <Social />
31
+ <Analytics loc={loc} />
32
+ </head>
33
+ );
34
+ });
@@ -1,41 +1,36 @@
1
- import { component$, Host, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, useStyles$ } from '@builder.io/qwik';
2
2
  import { useLocation } from '@builder.io/qwik-city';
3
3
  import styles from './header.css?inline';
4
4
 
5
- export default component$(
6
- () => {
7
- useStyles$(styles);
5
+ export default component$(() => {
6
+ useStyles$(styles);
8
7
 
9
- const pathname = useLocation().pathname;
8
+ const pathname = useLocation().pathname;
10
9
 
11
- return (
12
- <Host>
13
- <div class="header-inner">
14
- <section class="logo">
15
- <a href="/">Qwik City 🏙</a>
16
- </section>
17
- <nav>
18
- <a href="/blog" class={{ active: pathname.startsWith('/blog') }}>
19
- Blog
20
- </a>
21
- <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
22
- Docs
23
- </a>
24
- <a href="/api" class={{ active: pathname.startsWith('/api') }}>
25
- API
26
- </a>
27
- <a href="/products/hat" class={{ active: pathname.startsWith('/products') }}>
28
- Products
29
- </a>
30
- <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
31
- About Us
32
- </a>
33
- </nav>
34
- </div>
35
- </Host>
36
- );
37
- },
38
- {
39
- tagName: 'header',
40
- }
41
- );
10
+ return (
11
+ <header>
12
+ <div class="header-inner">
13
+ <section class="logo">
14
+ <a href="/">Qwik City 🏙</a>
15
+ </section>
16
+ <nav>
17
+ <a href="/blog" class={{ active: pathname.startsWith('/blog') }}>
18
+ Blog
19
+ </a>
20
+ <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
21
+ Docs
22
+ </a>
23
+ <a href="/api" class={{ active: pathname.startsWith('/api') }}>
24
+ API
25
+ </a>
26
+ <a href="/products/hat" class={{ active: pathname.startsWith('/products') }}>
27
+ Products
28
+ </a>
29
+ <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
30
+ About Us
31
+ </a>
32
+ </nav>
33
+ </div>
34
+ </header>
35
+ );
36
+ });
@@ -1,39 +1,36 @@
1
- import { component$, Host, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, useStyles$ } from '@builder.io/qwik';
2
2
  import { useContent, Link, useLocation } from '@builder.io/qwik-city';
3
3
  import styles from './menu.css?inline';
4
4
 
5
- export const Menu = component$(
6
- () => {
7
- useStyles$(styles);
5
+ export const Menu = component$(() => {
6
+ useStyles$(styles);
8
7
 
9
- const { menu } = useContent();
10
- const loc = useLocation();
8
+ const { menu } = useContent();
9
+ const loc = useLocation();
11
10
 
12
- return (
13
- <Host class="menu">
14
- {menu
15
- ? menu.items?.map((item) => (
16
- <>
17
- <h5>{item.text}</h5>
18
- <ul>
19
- {item.items?.map((item) => (
20
- <li>
21
- <Link
22
- href={item.href}
23
- class={{
24
- 'is-active': loc.pathname === item.href,
25
- }}
26
- >
27
- {item.text}
28
- </Link>
29
- </li>
30
- ))}
31
- </ul>
32
- </>
33
- ))
34
- : null}
35
- </Host>
36
- );
37
- },
38
- { tagName: 'aside' }
39
- );
11
+ return (
12
+ <aside class="menu">
13
+ {menu
14
+ ? menu.items?.map((item) => (
15
+ <>
16
+ <h5>{item.text}</h5>
17
+ <ul>
18
+ {item.items?.map((item) => (
19
+ <li>
20
+ <Link
21
+ href={item.href}
22
+ class={{
23
+ 'is-active': loc.pathname === item.href,
24
+ }}
25
+ >
26
+ {item.text}
27
+ </Link>
28
+ </li>
29
+ ))}
30
+ </ul>
31
+ </>
32
+ ))
33
+ : null}
34
+ </aside>
35
+ );
36
+ });
@@ -1,14 +1,16 @@
1
- import { Html } from '@builder.io/qwik-city';
1
+ import { component$ } from '@builder.io/qwik';
2
+ import { QwikCity, RouterOutlet } from '@builder.io/qwik-city';
2
3
  import { Head } from './components/head/head';
3
- import { Body } from './components/body/body';
4
4
 
5
5
  import './global.css';
6
6
 
7
- export default () => {
7
+ export default component$(() => {
8
8
  return (
9
- <Html lang="en" dir="ltr">
9
+ <QwikCity>
10
10
  <Head />
11
- <Body />
12
- </Html>
11
+ <body lang="en">
12
+ <RouterOutlet />
13
+ </body>
14
+ </QwikCity>
13
15
  );
14
- };
16
+ });
@@ -1,14 +1,14 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  return (
6
- <Host>
6
+ <div>
7
7
  <h1>About Us</h1>
8
8
  <p>
9
9
  <a href="/">Home</a>
10
10
  </p>
11
- </Host>
11
+ </div>
12
12
  );
13
13
  });
14
14
 
@@ -1,4 +1,4 @@
1
- import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
1
+ import { component$, useClientEffect$, useStore } from '@builder.io/qwik';
2
2
 
3
3
  /**
4
4
  * Uses named layout `foo`
@@ -16,7 +16,7 @@ export default component$(() => {
16
16
  });
17
17
 
18
18
  return (
19
- <Host>
19
+ <div>
20
20
  <h1>Qwik City Test API!</h1>
21
21
 
22
22
  <ul>
@@ -29,6 +29,6 @@ export default component$(() => {
29
29
  </ul>
30
30
 
31
31
  <p>Timestamp: {store.timestamp}</p>
32
- </Host>
32
+ </div>
33
33
  );
34
34
  });
@@ -1,4 +1,4 @@
1
- import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, Slot, useStyles$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
  import styles from './api.css?inline';
4
4
 
@@ -11,7 +11,7 @@ export default component$(() => {
11
11
  useStyles$(styles);
12
12
 
13
13
  return (
14
- <Host class="api">
14
+ <div class="api">
15
15
  <aside class="api-menu">
16
16
  <h2>API</h2>
17
17
  <ul>
@@ -26,7 +26,7 @@ export default component$(() => {
26
26
  <section class="api-content">
27
27
  <Slot />
28
28
  </section>
29
- </Host>
29
+ </div>
30
30
  );
31
31
  });
32
32
 
@@ -1,11 +1,11 @@
1
- import { component$, Host, Resource } from '@builder.io/qwik';
1
+ import { component$, Resource } from '@builder.io/qwik';
2
2
  import { useEndpoint, DocumentHead, RequestHandler } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  const resource = useEndpoint<typeof onGet>();
6
6
 
7
7
  return (
8
- <Host>
8
+ <div>
9
9
  <Resource
10
10
  resource={resource}
11
11
  onResolved={(blog) => (
@@ -15,7 +15,7 @@ export default component$(() => {
15
15
  </>
16
16
  )}
17
17
  />
18
- </Host>
18
+ </div>
19
19
  );
20
20
  });
21
21
 
@@ -1,8 +1,8 @@
1
- import { component$, Host, Slot } from '@builder.io/qwik';
1
+ import { component$, Slot } from '@builder.io/qwik';
2
2
 
3
3
  export default component$(() => {
4
4
  return (
5
- <Host>
5
+ <div>
6
6
  <section class="blog-content">
7
7
  <Slot />
8
8
  </section>
@@ -16,6 +16,6 @@ export default component$(() => {
16
16
  </li>
17
17
  </ul>
18
18
  </aside>
19
- </Host>
19
+ </div>
20
20
  );
21
21
  });
@@ -1,12 +1,12 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  return (
6
- <Host>
6
+ <div>
7
7
  <h1>Dashboard</h1>
8
8
  <p>Welcome to the dashboard.</p>
9
- </Host>
9
+ </div>
10
10
  );
11
11
  });
12
12
 
@@ -1,4 +1,4 @@
1
- import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, Slot, useStyles$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
  import Footer from '../../components/footer/footer';
4
4
  import Header from '../../components/header/header';
@@ -14,7 +14,7 @@ export default component$(() => {
14
14
  useStyles$(styles);
15
15
 
16
16
  return (
17
- <Host>
17
+ <div>
18
18
  <Header />
19
19
  <main class="dashboard">
20
20
  <aside class="dashboard-menu">
@@ -33,7 +33,7 @@ export default component$(() => {
33
33
  </section>
34
34
  </main>
35
35
  <Footer />
36
- </Host>
36
+ </div>
37
37
  );
38
38
  });
39
39
 
@@ -1,12 +1,12 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  return (
6
- <Host>
6
+ <div>
7
7
  <h1>Profile</h1>
8
8
  <p>My Profile</p>
9
- </Host>
9
+ </div>
10
10
  );
11
11
  });
12
12
 
@@ -1,12 +1,12 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  return (
6
- <Host>
6
+ <div>
7
7
  <h1>Settings</h1>
8
8
  <p>My Settings</p>
9
- </Host>
9
+ </div>
10
10
  );
11
11
  });
12
12
 
@@ -1,18 +1,18 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import { useLocation, DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  const { pathname, params } = useLocation();
6
6
 
7
7
  return (
8
- <Host>
8
+ <div>
9
9
  <h1>
10
10
  Docs: {params.category} {params.id}
11
11
  </h1>
12
12
  <p>pathname: {pathname}</p>
13
13
  <p>category: {params.category}</p>
14
14
  <p>id: {params.id}</p>
15
- </Host>
15
+ </div>
16
16
  );
17
17
  });
18
18
 
@@ -1,11 +1,11 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  return (
6
- <Host>
6
+ <div>
7
7
  <h1>Welcome to the Docs!</h1>
8
- </Host>
8
+ </div>
9
9
  );
10
10
  });
11
11
 
@@ -1,4 +1,4 @@
1
- import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, Slot, useStyles$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
  import { Breadcrumbs } from '../../components/breadcrumbs/breadcrumbs';
4
4
  import Footer from '../../components/footer/footer';
@@ -10,7 +10,7 @@ export default component$(() => {
10
10
  useStyles$(styles);
11
11
 
12
12
  return (
13
- <Host class="docs full-screen">
13
+ <div class="docs full-screen">
14
14
  <Header />
15
15
  <main>
16
16
  <Menu />
@@ -20,7 +20,7 @@ export default component$(() => {
20
20
  <Footer />
21
21
  </section>
22
22
  </main>
23
- </Host>
23
+ </div>
24
24
  );
25
25
  });
26
26
 
@@ -1,13 +1,13 @@
1
- import { component$, Host } from '@builder.io/qwik';
1
+ import { component$ } from '@builder.io/qwik';
2
2
  import type { DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
5
5
  return (
6
- <Host>
6
+ <div>
7
7
  <h1>Welcome to Qwik City</h1>
8
8
 
9
9
  <p>The meta-framework for Qwik.</p>
10
- </Host>
10
+ </div>
11
11
  );
12
12
  });
13
13
 
@@ -1,15 +1,15 @@
1
- import { component$, Host, Slot } from '@builder.io/qwik';
1
+ import { component$, Slot } from '@builder.io/qwik';
2
2
  import Footer from '../components/footer/footer';
3
3
  import Header from '../components/header/header';
4
4
 
5
5
  export default component$(() => {
6
6
  return (
7
- <Host>
7
+ <div>
8
8
  <Header />
9
9
  <main>
10
10
  <Slot />
11
11
  </main>
12
12
  <Footer />
13
- </Host>
13
+ </div>
14
14
  );
15
15
  });
@@ -1,4 +1,4 @@
1
- import { Resource, component$, Host } from '@builder.io/qwik';
1
+ import { Resource, component$ } from '@builder.io/qwik';
2
2
  import { useEndpoint, useLocation, RequestHandler, DocumentHead } from '@builder.io/qwik-city';
3
3
 
4
4
  export default component$(() => {
@@ -7,7 +7,7 @@ export default component$(() => {
7
7
  const resource = useEndpoint<typeof onGet>();
8
8
 
9
9
  return (
10
- <Host>
10
+ <>
11
11
  <Resource
12
12
  resource={resource}
13
13
  onPending={() => <p>Loading</p>}
@@ -44,7 +44,7 @@ export default component$(() => {
44
44
  <a href="/products/hoodie">Hoodie (404 Not Found)</a>
45
45
  </li>
46
46
  </ul>
47
- </Host>
47
+ </>
48
48
  );
49
49
  });
50
50
 
@@ -2,4 +2,4 @@
2
2
 
3
3
  // Cloudflare Pages Functions
4
4
  // https://developers.cloudflare.com/pages/platform/functions/
5
- export { onRequest } from '../server/entry.cloudflare';
5
+ export { onRequestGet } from '../server/entry.cloudflare';
@@ -14,13 +14,13 @@ const { router, notFound } = qwikCity(render);
14
14
  // create the express server
15
15
  const app = express();
16
16
 
17
+ // static asset handlers
18
+ app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y' }));
19
+ app.use(express.static(distDir));
20
+
17
21
  // use Qwik City's page and endpoint handler
18
22
  app.use(router);
19
23
 
20
- // static asset handlers
21
- app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y', index: false }));
22
- app.use(express.static(distDir, { index: false }));
23
-
24
24
  // use Qwik City's 404 handler
25
25
  app.use(notFound);
26
26
 
@@ -6,10 +6,11 @@ This starter site is configured to deploy to [Netlify Edge Functions](https://ww
6
6
 
7
7
  The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run:
8
8
 
9
- 1. Build your site with `netlify build`.
10
- 2. Start a local server with `npm run serve`.
9
+ 1. install Netlify CLI globally `npm i -g netlify-cli`
10
+ 2. Build your site both ssr and client `npm run build`.
11
+ 3. Start a local server with `npm run serve`.
11
12
  In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally.
12
- 3. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
13
+ 4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
13
14
 
14
15
  ### Deployments
15
16
 
@@ -34,3 +35,5 @@ netlify deploy --build
34
35
  ```
35
36
 
36
37
  You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site.
38
+
39
+ Add `--prod` flag to deploy to production.
@@ -1,3 +1,10 @@
1
1
  [build]
2
2
  publish = "dist"
3
3
  command = "npm run build"
4
+
5
+ [[edge_functions]]
6
+ path = "/*"
7
+ function = "entry.netlify"
8
+
9
+ [dev]
10
+ framework = "#static"
@@ -12,7 +12,7 @@
12
12
  "vite": {
13
13
  "VITE_IMPORTS": "import netlifyEdge from '@netlify/vite-plugin-netlify-edge';",
14
14
  "VITE_CONFIG": "",
15
- "VITE_QWIK": "{ ssr: { outDir: '.netlify/edge-functions/entry.netlify' } }",
15
+ "VITE_QWIK": "{ ssr: { outDir: 'netlify/edge-functions/entry.netlify' } }",
16
16
  "VITE_PLUGINS": "netlifyEdge({ functionName: 'entry.netlify' }),"
17
17
  }
18
18
  }
@@ -1,15 +0,0 @@
1
- import { component$, Host } from '@builder.io/qwik';
2
- import { RouterOutlet } from '@builder.io/qwik-city';
3
-
4
- export const Body = component$(
5
- () => {
6
- return (
7
- <Host>
8
- <RouterOutlet />
9
- </Host>
10
- );
11
- },
12
- {
13
- tagName: 'body',
14
- }
15
- );