refactor: standarize starters (#230)

manucorporat · web-flow · commit 7938ff0a3dec · 2022-03-10T19:24:38.000Z
diff --git a/starters/apps/base/index.html b/starters/apps/base/index.html
@@ -8,9 +8,9 @@
     <script type="module">
       // Vite Dev Mode Only
       import '@builder.io/qwik/qwikloader.js';
-      import { render } from '@builder.io/qwik';
-      import { App } from '/src/main.tsx';
-      render(document.body, App);
+      import { render, jsx } from '@builder.io/qwik';
+      import { Main } from '/src/main.tsx';
+      render(document.body, jsx(Main, {}));
     </script>
   </body>
 </html>
diff --git a/starters/apps/base/package.json b/starters/apps/base/package.json
@@ -7,9 +7,10 @@
     "build": "npm run typecheck && npm run build.client && npm run build.server",
     "build.client": "vite build",
     "build.server": "vite build --outDir server/build --ssr src/entry.server.tsx",
-    "preview": "vite preview",
-    "dev": "vite",
+    "dev.ssr": "vite",
     "dev.client": "vite --mode clientonly",
+    "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js",
+    "dev": "npm run dev.client",
     "start": "npm run dev"
   },
   "devDependencies": {
diff --git a/starters/apps/starter-builder/src/entry.server.tsx b/starters/apps/starter-builder/src/entry.server.tsx
@@ -7,7 +7,7 @@
  */
 
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { App } from './main';
+import { Main } from './main';
 
 /**
  * Entry point for server-side pre-rendering.
@@ -22,7 +22,7 @@ export function render(opts: RenderToStringOptions) {
         <title>Qwik Blank App</title>
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <script>({fetchQwikBuilderContent.toString()})();</script>
         <QwikLoader debug={opts.debug} />
       </body>
diff --git a/starters/apps/starter-builder/src/main.tsx b/starters/apps/starter-builder/src/main.tsx
@@ -4,7 +4,7 @@ import { Header } from './components/header/header';
 
 import './global.css';
 
-export const App = component$(() => {
+export const Main = component$(() => {
   return $(() => (
     <>
       <Header />
diff --git a/starters/apps/starter-partytown/src/entry.server.tsx b/starters/apps/starter-partytown/src/entry.server.tsx
@@ -8,7 +8,7 @@
 
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
 import { partytownSnippet } from '@builder.io/partytown/integration';
-import { App } from './main';
+import { Main } from './main';
 
 /**
  * Entry point for server-side pre-rendering.
@@ -24,7 +24,7 @@ export function render(opts: RenderToStringOptions) {
         <script children={partytownSnippet({ debug: true })} />
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <script type="text/partytown">
           ({partyTownExampleWhichBlocksMainThreadForOneSecond.toString()})()
         </script>
diff --git a/starters/apps/starter-partytown/src/main.tsx b/starters/apps/starter-partytown/src/main.tsx
@@ -1,7 +1,7 @@
 import { component$, $, useEvent, useStore } from '@builder.io/qwik';
 import './global.css';
 
-export const App = component$(() => {
+export const Main = component$(() => {
   const state = useStore({ name: 'World', running: true });
   return $(() => {
     return (
diff --git a/starters/apps/starter/src/entry.server.tsx b/starters/apps/starter/src/entry.server.tsx
@@ -7,7 +7,7 @@
  */
 
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { App } from './main';
+import { Main } from './main';
 
 /**
  * Entry point for server-side pre-rendering.
@@ -22,7 +22,7 @@ export function render(opts: RenderToStringOptions) {
         <title>Qwik Blank App</title>
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <QwikLoader debug={opts.debug} />
       </body>
     </html>,
diff --git a/starters/apps/starter/src/main.tsx b/starters/apps/starter/src/main.tsx
@@ -3,7 +3,7 @@ import { Logo } from './components/logo/logo';
 
 import './global.css';
 
-export const App = component$(() => {
+export const Main = component$(() => {
   const state = useStore({ name: 'World' });
   return $(() => (
     <Host class="my-app">
diff --git a/starters/apps/todo/src/components/body/body.tsx b/starters/apps/todo/src/components/body/body.tsx
@@ -7,7 +7,7 @@ import { Item } from '../item/item';
  *
  * This component only rerenders/hydrates/downloads if the list of todos changes.
  */
-export const Main = component$((props: { todos: Todos }) => {
+export const Body = component$((props: { todos: Todos }) => {
   return $(() => {
     return (
       <Host class="main">
diff --git a/starters/apps/todo/src/entry.server.tsx b/starters/apps/todo/src/entry.server.tsx
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
  */
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { App } from './main';
+import { Main } from './main';
 
 /**
  * Entry point for server-side pre-rendering.
@@ -21,7 +21,7 @@ export function render(opts: RenderToStringOptions) {
         <title>Qwik Demo: ToDo</title>
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <QwikLoader debug={opts.debug} />
       </body>
     </html>,
diff --git a/starters/apps/todo/src/main.tsx b/starters/apps/todo/src/main.tsx
@@ -1,7 +1,7 @@
 import { component$, $, useStore } from '@builder.io/qwik';
 import { Footer } from './components/footer/footer';
 import { Header } from './components/header/header';
-import { Main } from './components/main/main';
+import { Body } from './components/body/body';
 import type { Todos } from './state/state';
 
 import './base.css';
@@ -14,7 +14,7 @@ import './index.css';
  * Qwik knows that it should never need to be rerendered, and its code will never
  * download to the client.
  */
-export const App = component$(() => {
+export const Main = component$(() => {
   const todos = useStore<Todos>({
     filter: 'all',
     items: [
@@ -27,7 +27,7 @@ export const App = component$(() => {
     return (
       <section class="todoapp">
         <Header todos={todos} />
-        <Main todos={todos} />
+        <Body todos={todos} />
         <Footer todos={todos} />
       </section>
     );

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ import { Item } from '../item/item';`
`7`	`7`	`*`
`8`	`8`	`* This component only rerenders/hydrates/downloads if the list of todos changes.`
`9`	`9`	`*/`
`10`		`-export const Main = component$((props: { todos: Todos }) => {`
	`10`	`+export const Body = component$((props: { todos: Todos }) => {`
`11`	`11`	`return $(() => {`
`12`	`12`	`return (`
`13`	`13`	`<Host class="main">`