create-qwik 0.0.20-2 → 0.0.20-5

package/README.md

@@ -41,7 +41,7 @@ console.log(result);
 ## Community
 
 - Ping us at [@QwikDev](https://twitter.com/QwikDev)
-- Join our [Discord](https://discord.gg/bNVSQmPzqy) community.
+- Join our [Discord](https://qwik.builder.io/chat) community.
 - Join our [weekly office hours](https://calendar.google.com/calendar/u/0?cid=Y180ZG91YjR2NTZ1cW43YmgzbW1oZGJ2M3R2c0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
 
 ## Related

package/index.js

@@ -5,14 +5,14 @@
  * 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
  */
-var O=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames,E=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var I=(e,t,r)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,D=(e,t)=>{for(var r in t||(t={}))C.call(t,r)&&I(e,r,t[r]);if(E)for(var r of E(t))L.call(t,r)&&I(e,r,t[r]);return e};var T=(e,t)=>{for(var r in t)O(e,r,{get:t[r],enumerable:!0})},V=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of B(t))!C.call(e,i)&&i!==r&&O(e,i,{get:()=>t[i],enumerable:!(o=A(t,i))||o.enumerable});return e};var U=e=>V(O({},"__esModule",{value:!0}),e);var H={};T(H,{generateStarter:()=>Q,getStarters:()=>N});module.exports=U(H);var g=require("fs"),M=require("path");var c=require("fs"),u=require("path");function y(e,t,r){let o=(0,c.readdirSync)(e);for(let i of o){let s=i==="gitignore"?".gitignore":i,n=(0,u.join)(e,i),a=(0,u.join)(t,s),w=(0,c.statSync)(n);if(w.isDirectory())(0,c.mkdirSync)(a,{recursive:!0}),y(n,a,r);else if(w.isFile())if(r.length>0&&[".json",".toml",".md",".html"].includes((0,u.extname)(n))){let p=(0,c.readFileSync)(n,"utf8");for(let f of r)p=p.replace(f[0],f[1]);(0,c.writeFileSync)(a,p)}else(0,c.copyFileSync)(n,a)}}function l(e){let t=(0,u.join)(e,"package.json");return JSON.parse((0,c.readFileSync)(t,"utf-8"))}function q(e,t){let r=(0,u.join)(e,"package.json");(0,c.writeFileSync)(r,JSON.stringify(t,null,2)+`
-`)}function F(e){return e.toLocaleLowerCase().split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function G(e){return e.toLocaleLowerCase().replace(/ /g,"-")}function J(e,t){["scripts","dependencies","devDependencies"].forEach(o=>{$(e,t,o)})}function $(e,t,r){if(t[r]){e[r]?Object.assign(e[r],D({},t[r])):e[r]=D({},t[r]);let o={},i=Object.keys(e[r]).sort();for(let s of i)o[s]=e[r][s];e[r]=o}}async function Q(e){if(!x(e.projectName))throw new Error("Missing project name");if(!x(e.appId))throw new Error("Missing starter id");if(!x(e.outDir))throw new Error("Missing outDir");(0,g.existsSync)(e.outDir)||(0,g.mkdirSync)(e.outDir,{recursive:!0});let t={projectName:e.projectName,appId:e.appId,serverId:e.serverId,outDir:e.outDir},r=await N(),o=r.apps.find(n=>n.id===e.appId),i=r.servers.find(n=>n.id===e.serverId),s=r.features.filter(n=>e.featureIds.includes(n.id));if(o)_(r,t,o,i,s);else throw new Error(`Invalid starter id "${e.appId}".`);return t}function _(e,t,r,o,i){let s=[[/\bqwik-project-name\b/g,t.projectName]],n=e.apps.find(d=>d.id==="base");if(!n)throw new Error("Unable to find base app.");y(n.dir,t.outDir,s),y(r.dir,t.outDir,s);let a=l(n.dir),w=l(n.dir);J(a,w);let m=n.readme.trim()+`
+var O=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames,I=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var P=(e,t,r)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,k=(e,t)=>{for(var r in t||(t={}))C.call(t,r)&&P(e,r,t[r]);if(I)for(var r of I(t))L.call(t,r)&&P(e,r,t[r]);return e};var T=(e,t)=>{for(var r in t)O(e,r,{get:t[r],enumerable:!0})},U=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of B(t))!C.call(e,i)&&i!==r&&O(e,i,{get:()=>t[i],enumerable:!(o=A(t,i))||o.enumerable});return e};var V=e=>U(O({},"__esModule",{value:!0}),e);var H={};T(H,{generateStarter:()=>Q,getStarters:()=>N});module.exports=V(H);var g=require("fs"),M=require("path");var c=require("fs"),u=require("path");function y(e,t,r){let o=(0,c.readdirSync)(e);for(let i of o){let s=i==="gitignore"?".gitignore":i,n=(0,u.join)(e,i),a=(0,u.join)(t,s),w=(0,c.statSync)(n);if(w.isDirectory())(0,c.mkdirSync)(a,{recursive:!0}),y(n,a,r);else if(w.isFile())if(r.length>0&&[".json",".toml",".md",".html"].includes((0,u.extname)(n))){let p=(0,c.readFileSync)(n,"utf8");for(let f of r)p=p.replace(f[0],f[1]);(0,c.writeFileSync)(a,p)}else(0,c.copyFileSync)(n,a)}}function l(e){let t=(0,u.join)(e,"package.json");return JSON.parse((0,c.readFileSync)(t,"utf-8"))}function q(e,t){let r=(0,u.join)(e,"package.json");(0,c.writeFileSync)(r,JSON.stringify(t,null,2)+`
+`)}function F(e){return e.toLocaleLowerCase().split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function G(e){return e.toLocaleLowerCase().replace(/ /g,"-")}function J(e,t){["scripts","dependencies","devDependencies"].forEach(o=>{$(e,t,o)})}function $(e,t,r){if(t[r]){e[r]?Object.assign(e[r],k({},t[r])):e[r]=k({},t[r]);let o={},i=Object.keys(e[r]).sort();for(let s of i)o[s]=e[r][s];e[r]=o}}async function Q(e){if(!x(e.projectName))throw new Error("Missing project name");if(!x(e.appId))throw new Error("Missing starter id");if(!x(e.outDir))throw new Error("Missing outDir");(0,g.existsSync)(e.outDir)||(0,g.mkdirSync)(e.outDir,{recursive:!0});let t={projectName:e.projectName,appId:e.appId,serverId:e.serverId,outDir:e.outDir},r=await N(),o=r.apps.find(n=>n.id===e.appId),i=r.servers.find(n=>n.id===e.serverId),s=r.features.filter(n=>e.featureIds.includes(n.id));if(o)_(r,t,o,i,s);else throw new Error(`Invalid starter id "${e.appId}".`);return t}function _(e,t,r,o,i){let s=[[/\bqwik-project-name\b/g,t.projectName]],n=e.apps.find(d=>d.id==="base");if(!n)throw new Error("Unable to find base app.");y(n.dir,t.outDir,s),y(r.dir,t.outDir,s);let a=l(n.dir),w=l(n.dir);J(a,w);let m=n.readme.trim()+`
 
 `,p=[r.description,"Vite.js tooling."];if(o){y(o.dir,t.outDir,s);let d=l(o.dir);J(a,d),d.description&&p.push(d.description),o.readme&&(m+=o.readme.trim()+`
 
 `)}for(let d of i){y(d.dir,t.outDir,s);let v=l(d.dir);J(a,v),v.description&&p.push(v.description),d.readme&&(m+=d.readme.trim()+`
 
-`)}a.name=G(t.projectName),a.description=p.join(" ").trim();let f=(0,M.join)(t.outDir,"README.md"),k=p.map(d=>`- ${d}`).join(`
-`).trim(),j=[`# Qwik ${t.projectName} \u26A1\uFE0F`,"",k,"",m.trim(),"","--------------------","","## Related","","- [Qwik Docs](https://qwik.builder.io/)","- [Qwik Github](https://github.com/BuilderIO/qwik)","- [@QwikDev](https://twitter.com/QwikDev)","- [Discord](https://discord.gg/bNVSQmPzqy)","- [Vite](https://vitejs.dev/)","- [Partytown](https://partytown.builder.io/)","- [Mitosis](https://github.com/BuilderIO/mitosis)","- [Builder.io](https://www.builder.io/)"].join(`
+`)}a.name=G(t.projectName),a.description=p.join(" ").trim();let f=(0,M.join)(t.outDir,"README.md"),D=p.map(d=>`- ${d}`).join(`
+`).trim(),j=[`# Qwik ${t.projectName} \u26A1\uFE0F`,"",D,"",m.trim(),"","--------------------","","## Related","","- [Qwik Docs](https://qwik.builder.io/)","- [Qwik Github](https://github.com/BuilderIO/qwik)","- [@QwikDev](https://twitter.com/QwikDev)","- [Discord](https://qwik.builder.io/chat)","- [Vite](https://vitejs.dev/)","- [Partytown](https://partytown.builder.io/)","- [Mitosis](https://github.com/BuilderIO/mitosis)","- [Builder.io](https://www.builder.io/)"].join(`
 `);(0,g.writeFileSync)(f,j.trim()+`
-`);let b=z(a);q(t.outDir,b)}function z(e){e=D({},e);let t={name:e.name,version:e.version,description:e.description,scripts:e.scripts,dependencies:e.dependencies,devDependencies:e.devDependencies};Object.keys(t).forEach(o=>{delete e[o]}),delete e.qwik;let r=Object.keys(e).sort();for(let o of r)t[o]=e[o];return t}function x(e){return typeof e=="string"&&e.trim().length>0}var h=require("fs"),S=require("path");var P=null;async function N(){return P==null&&(P=K((0,S.join)(__dirname,"starters"))),P}function K(e){return{apps:R(e,"apps"),servers:R(e,"servers"),features:R(e,"features")}}function R(e,t){let r=(0,S.join)(e,t);return(0,h.readdirSync)(r).filter(i=>(0,h.statSync)((0,S.join)(r,i)).isDirectory()).map(i=>{var m,p,f,k,j;let s=(0,S.join)(r,i),n=l(s),a=null;try{a=(0,h.readFileSync)((0,S.join)(s,"README.md"),"utf-8")}catch{}return{id:i,name:F(i),description:(m=n.description)!=null?m:"",readme:a,dir:s,priority:(f=(p=n==null?void 0:n.qwik)==null?void 0:p.priority)!=null?f:0,featureOptions:(j=(k=n==null?void 0:n.qwik)==null?void 0:k.featureOptions)!=null?j:[]}}).sort((i,s)=>i.priority>s.priority?-1:i.priority<s.priority?1:i.name<s.name?-1:i.name>s.name?1:0)}0&&(module.exports={generateStarter,getStarters});
+`);let E=K(a);q(t.outDir,E)}function K(e){e=k({},e);let t={name:e.name,version:e.version,description:e.description,scripts:e.scripts,dependencies:e.dependencies,devDependencies:e.devDependencies};Object.keys(t).forEach(o=>{delete e[o]}),delete e.qwik;let r=Object.keys(e).sort();for(let o of r)t[o]=e[o];return t}function x(e){return typeof e=="string"&&e.trim().length>0}var S=require("fs"),h=require("path");var R=null;async function N(){return R==null&&(R=z((0,h.join)(__dirname,"starters"))),R}function z(e){return{apps:b(e,"apps"),servers:b(e,"servers"),features:b(e,"features")}}function b(e,t){let r=(0,h.join)(e,t);return(0,S.readdirSync)(r).filter(i=>(0,S.statSync)((0,h.join)(r,i)).isDirectory()).map(i=>{var m,p,f,D,j;let s=(0,h.join)(r,i),n=l(s),a=null;try{a=(0,S.readFileSync)((0,h.join)(s,"README.md"),"utf-8")}catch{}return{id:i,name:F(i),description:(m=n.description)!=null?m:"",readme:a,dir:s,priority:(f=(p=n==null?void 0:n.qwik)==null?void 0:p.priority)!=null?f:0,featureOptions:(j=(D=n==null?void 0:n.qwik)==null?void 0:D.featureOptions)!=null?j:[]}}).sort((i,s)=>i.priority>s.priority?-1:i.priority<s.priority?1:i.name<s.name?-1:i.name>s.name?1:0)}0&&(module.exports={generateStarter,getStarters});

package/package.json

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

package/starters/apps/base/gitignore

@@ -1,16 +1,19 @@
+# Build
+build
+dist
+server
+functions/**/*.js
+
+# Development
+node_modules
+
+# Cache
 .cache
 .mf
 .vscode
 .rollup.cache
-
-build
-dist
-node_modules
-server
 tsconfig.tsbuildinfo
 
-q-symbols.json
-
 # Logs
 logs
 *.log
@@ -20,7 +23,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-# Editor directories and files
+# Editor
 !.vscode/extensions.json
 .idea
 .DS_Store

package/starters/apps/base/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "npm run typecheck && npm run build.client && npm run build.ssr",
     "build.client": "vite build",
-    "build.ssr": "vite build --mode ssr",
+    "build.ssr": "vite build --ssr src/entry.server.tsx",
     "dev": "vite",
     "dev.ssr": "vite --mode ssr",
     "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js",
@@ -13,11 +13,11 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.20-2",
-    "@types/node": "17.0.31",
+    "@builder.io/qwik": "0.0.20-5",
+    "@types/node": "17.0.34",
     "node-fetch": "2.6.7",
     "typescript": "4.6.4",
-    "vite": "2.9.8"
+    "vite": "2.9.9"
   },
   "homepage": "https://qwik.builder.io/",
   "private": true,

package/starters/apps/starter/src/components/logo/logo.tsx

@@ -3,10 +3,11 @@ import { component$, Host } from '@builder.io/qwik';
 export const Logo = component$(() => {
   return (
     <Host style={{ 'text-align': 'center' }}>
-      <a href="https://github.com/builderio/qwik">
+      <a href="https://qwik.builder.io/">
         <img
           alt="Qwik Logo"
           width={400}
+          height={147}
           src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
         />
       </a>

package/starters/apps/starter/src/entry.ssr.tsx

@@ -0,0 +1,15 @@
+import { renderToString, RenderToStringOptions } 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 function render(opts?: RenderToStringOptions) {
+  // Render the Root component to a string
+  // Pass in the manifest that was generated from the client build
+  return renderToString(<Root />, {
+    ...opts,
+    manifest,
+  });
+}

package/starters/apps/starter-builder/src/entry.ssr.tsx

@@ -0,0 +1,15 @@
+import { renderToString, RenderToStringOptions } 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 function render(opts?: RenderToStringOptions) {
+  // Render the Root component to a string
+  // Pass in the manifest that was generated from the client build
+  return renderToString(<Root />, {
+    ...opts,
+    manifest,
+  });
+}

package/starters/apps/starter-partytown/src/{entry.server.tsx → entry.ssr.tsx}

@@ -1,4 +1,5 @@
 import { renderToString, RenderToStringOptions } from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
 import { Root } from './root';
 
 /**
@@ -7,6 +8,7 @@ import { Root } from './root';
 export function render(opts: RenderToStringOptions) {
   return renderToString(<Root />, {
     ...opts,
+    manifest,
     qwikLoader: {
       events: ['click', 'keyup', 'expensiveComputationDone'],
     },

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

@@ -1,8 +1,8 @@
-import { component$, useStyles$, useStore } from '@builder.io/qwik';
+import { component$, useStyles$, useStore, useContextProvider } from '@builder.io/qwik';
 import { Footer } from '../footer/footer';
 import { Header } from '../header/header';
 import { Body } from '../body/body';
-import type { Todos } from '../../state/state';
+import { TODOS, Todos } from '../../state/state';
 import styles from './index.css?inline';
 
 /**
@@ -23,11 +23,13 @@ export const App = component$(() => {
       { completed: false, title: 'Profit' },
     ],
   });
+  useContextProvider(TODOS, todos);
+
   return (
     <section class="todoapp">
-      <Header todos={todos} />
-      <Body todos={todos} />
-      <Footer todos={todos} />
+      <Header />
+      <Body />
+      <Footer />
     </section>
   );
 });

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

@@ -1,16 +1,14 @@
-import { component$, Host } from '@builder.io/qwik';
-import { FILTERS, Todos } from '../../state/state';
+import { component$, Host, useContext } from '@builder.io/qwik';
+import { FILTERS, TODOS } from '../../state/state';
 import { Item } from '../item/item';
 
-interface BodyProps {
-  todos: Todos;
-}
-export const Body = component$(({ todos }: BodyProps) => {
+export const Body = component$(() => {
+  const todos = useContext(TODOS);
   return (
     <Host class="main">
       <ul class="todo-list">
         {todos.items.filter(FILTERS[todos.filter]).map((key) => (
-          <Item item={key} todos={todos} />
+          <Item item={key} />
         ))}
       </ul>
     </Host>

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

@@ -1,5 +1,5 @@
-import { component$, Host } from '@builder.io/qwik';
-import { FILTERS, FilterStates, Todos } from '../../state/state';
+import { component$, Host, useContext } from '@builder.io/qwik';
+import { FILTERS, FilterStates, TODOS, Todos } from '../../state/state';
 
 /**
  * Footer showing items remaining and filtering options
@@ -7,18 +7,20 @@ import { FILTERS, FilterStates, Todos } from '../../state/state';
  * It only rerenders if the todos count changes or filters are reset.
  */
 export const Footer = component$(
-  (props: { todos: Todos }) => {
+  () => {
     /**
      * Example of lite-component (it will always be included with the parent component)
      */
+    const todos = useContext(TODOS);
+
     function Filter({ filter }: { filter: FilterStates }) {
       const lMode = filter.toLowerCase();
       return (
         <li>
           <a
-            class={{ selected: props.todos.filter == lMode }}
+            class={{ selected: todos.filter == lMode }}
             onClick$={() => {
-              props.todos.filter = filter;
+              todos.filter = filter;
             }}
           >
             {filter[0].toUpperCase() + filter.slice(1)}
@@ -26,10 +28,10 @@ export const Footer = component$(
         </li>
       );
     }
-    const remaining = props.todos.items.filter(FILTERS.active).length;
+    const remaining = todos.items.filter(FILTERS.active).length;
     return (
       <Host class="footer">
-        {props.todos.items.length > 0 ? (
+        {todos.items.length > 0 ? (
           <>
             <span class="todo-count">
               <strong>{remaining}</strong>
@@ -44,7 +46,7 @@ export const Footer = component$(
               <button
                 class="clear-completed"
                 onClick$={() => {
-                  props.todos.items = props.todos.items.filter(FILTERS.active);
+                  todos.items = todos.items.filter(FILTERS.active);
                 }}
               >
                 Clear completed

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

@@ -1,5 +1,5 @@
-import { component$, useStore } from '@builder.io/qwik';
-import type { Todos } from '../../state/state';
+import { component$, useContext, useContextProvider, useStore } from '@builder.io/qwik';
+import { TODOS, Todos } from '../../state/state';
 
 /**
  * Header component which is responsible for providing UI to ender new todo item.
@@ -7,8 +7,9 @@ import type { Todos } from '../../state/state';
  * This component only rerenders if the user interacts with it through the input.
  */
 export const Header = component$(
-  (props: { todos: Todos }) => {
+  () => {
     const state = useStore({ text: '' });
+    const todos = useContext(TODOS);
     return (
       <>
         <h1>todos</h1>
@@ -21,7 +22,7 @@ export const Header = component$(
             const inputValue = (event.target as HTMLInputElement).value;
             state.text = inputValue;
             if (event.key === 'Enter' && inputValue) {
-              props.todos.items.push({
+              todos.items.push({
                 completed: false,
                 title: state.text,
               });

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

@@ -1,6 +1,6 @@
-import { component$, useStore, Host, useRef, useWatch$ } from '@builder.io/qwik';
+import { component$, useStore, Host, useRef, useWatch$, useContext } from '@builder.io/qwik';
 
-import type { TodoItem, Todos } from '../../state/state';
+import { TodoItem, TODOS, Todos } from '../../state/state';
 
 /**
  * Individual items of the component.
@@ -10,13 +10,13 @@ import type { TodoItem, Todos } from '../../state/state';
 
 export interface ItemProps {
   item: TodoItem;
-  todos: Todos;
 }
 
 export const Item = component$(
   (props: ItemProps) => {
     const state = useStore({ editing: false });
     const editInput = useRef<HTMLInputElement>();
+    const todos = useContext(TODOS);
 
     useWatch$((track) => {
       const current = track(editInput, 'current');
@@ -48,7 +48,7 @@ export const Item = component$(
             class="destroy"
             onClick$={() => {
               const todoItem = props.item;
-              props.todos.items = props.todos.items.filter((i) => i != todoItem);
+              todos.items = todos.items.filter((i) => i != todoItem);
             }}
           />
         </div>

package/starters/apps/todo/src/entry.ssr.tsx

@@ -0,0 +1,15 @@
+import { renderToString, RenderToStringOptions } 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 function render(opts?: RenderToStringOptions) {
+  // Render the Root component to a string
+  // Pass in the manifest that was generated from the client build
+  return renderToString(<Root />, {
+    ...opts,
+    manifest,
+  });
+}

package/starters/apps/todo/src/state/state.ts

@@ -2,6 +2,10 @@
 // Todo Application State Interfaces
 ////////////////////////////////////////////////////////////////////////
 
+import { createContext } from '@builder.io/qwik';
+
+export const TODOS = createContext<Todos>('TodoApp');
+
 export interface TodoItem {
   completed: boolean;
   title: string;

package/starters/apps/todo-old.test/package.json

@@ -0,0 +1,7 @@
+{
+  "description": "Qwik implementation of TodoMVC: https://todomvc.com/.",
+  "qwik": {
+    "priority": 0,
+    "featureOptions": []
+  }
+}

package/starters/apps/todo-old.test/src/components/app/app.tsx

@@ -0,0 +1,33 @@
+import { component$, useStyles$, useStore } from '@builder.io/qwik';
+import { Footer } from '../footer/footer';
+import { Header } from '../header/header';
+import { Body } from '../body/body';
+import type { Todos } from '../../state/state';
+import styles from './index.css?inline';
+
+/**
+ * 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 App = component$(() => {
+  useStyles$(styles);
+
+  const todos = useStore<Todos>({
+    filter: 'all',
+    items: [
+      { completed: false, title: 'Read Qwik docs' },
+      { completed: false, title: 'Build HelloWorld' },
+      { completed: false, title: 'Profit' },
+    ],
+  });
+  return (
+    <section class="todoapp">
+      <Header todos={todos} />
+      <Body todos={todos} />
+      <Footer todos={todos} />
+    </section>
+  );
+});

package/starters/apps/todo-old.test/src/components/app/base.css

@@ -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;
+  }
+}