docs: update to 0.0.20-1 (QwikDev#453)

Mouvedia · May 6, 2022 · 3e62485 · 3e62485
1 parent 4a77611
commit 3e62485
Show file tree

Hide file tree

Showing 33 changed files with 409 additions and 195 deletions.
diff --git a/.github/ISSUE_TEMPLATE/docs_suggestion.md b/.github/ISSUE_TEMPLATE/docs_suggestion.md
@@ -1,5 +1,5 @@
 ---
-name: Documentation Suggestion
+name: 📖 Documentation Suggestion
 about: Suggestions on how we can improve the documentation.
 title: '[DOCS]'
 labels: documentation

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.20-0",
+  "version": "0.0.20-1",
   "scripts": {
     "build": "yarn node scripts --tsc --build --api --eslint --platform-binding --wasm",
     "build.platform": "yarn node scripts --platform-binding",
@@ -41,9 +41,9 @@
     "preinstall": "yarn node scripts/tools/preinstall-script.js"
   },
   "devDependencies": {
-    "@builder.io/partytown": "0.5.2",
+    "@builder.io/partytown": "0.5.4",
     "@builder.io/qwik-dom": "2.1.14",
-    "@microsoft/api-extractor": "7.23.0",
+    "@microsoft/api-extractor": "7.23.1",
     "@napi-rs/cli": "2.6.2",
     "@napi-rs/triples": "1.1.0",
     "@node-rs/helper": "1.3.3",
@@ -52,9 +52,9 @@
     "@types/cross-spawn": "6.0.2",
     "@types/eslint": "8.4.1",
     "@types/express": "4.17.13",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.0",
     "@types/mri": "1.1.1",
-    "@types/node": "17.0.29",
+    "@types/node": "17.0.31",
     "@types/path-browserify": "1.0.0",
     "@types/semver": "7.3.9",
     "@types/source-map-support": "0.5.4",
@@ -68,7 +68,7 @@
     "eslint-plugin-no-only-tests": "2.6.0",
     "eslint-plugin-qwik": "0.0.18",
     "execa": "6.1.0",
-    "express": "4.18.0",
+    "express": "4.18.1",
     "gzip-size": "6.0.0",
     "husky": "7.0.4",
     "jest": "27.5.1",
@@ -77,16 +77,16 @@
     "node-fetch": "^2.0.0",
     "path-browserify": "1.0.1",
     "prettier": "2.6.2",
-    "rollup": "2.70.2",
+    "rollup": "2.72.0",
     "semver": "7.3.7",
     "source-map-support": "0.5.21",
     "tailwindcss": "3.0.24",
-    "terser": "5.13.0",
+    "terser": "5.13.1",
     "todomvc-app-css": "2.4.2",
     "todomvc-common": "1.0.5",
     "ts-jest": "27.1.4",
-    "typescript": "4.6.3",
-    "vite": "2.9.6",
+    "typescript": "4.6.4",
+    "vite": "2.9.8",
     "wasm-pack": "0.10.2"
   },
   "workspaces": [

diff --git a/packages/create-qwik/package.json b/packages/create-qwik/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.20-0",
+  "version": "0.0.20-1",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -18,19 +18,19 @@
     "fmt.check": "prettier --check ."
   },
   "devDependencies": {
-    "@builder.io/partytown": "^0.5.2",
-    "@builder.io/qwik": "workspace:*",
+    "@builder.io/partytown": "^0.5.4",
+    "@builder.io/qwik": "0.0.20-0",
     "@builder.io/qwik-city": "0.0.4",
     "@cloudflare/kv-asset-handler": "0.2.0",
-    "@cloudflare/workers-types": "^3.7.1",
-    "autoprefixer": "10.4.5",
+    "@cloudflare/workers-types": "^3.9.0",
+    "autoprefixer": "10.4.7",
     "node-fetch": "2.6.7",
-    "postcss": "8.4.12",
+    "postcss": "8.4.13",
     "prism-themes": "1.9.0",
     "prismjs": "^1.28.0",
     "tailwindcss": "3.0.24",
     "uvu": "0.5.3",
-    "vite": "2.9.6",
+    "vite": "2.9.8",
     "wrangler": "beta"
   },
   "author": "Builder.io Team",

diff --git a/packages/docs/pages/playground/counter/app.tsx b/packages/docs/pages/playground/counter/app.tsx
@@ -0,0 +1,14 @@
+import { component$, useStore } from '@builder.io/qwik';
+
+export const App = component$(() => {
+  const store = useStore({ count: 0 });
+
+  return (
+    <div>
+      <p>Count: {store.count}</p>
+      <p>
+        <button onClick$={() => store.count++}>Click</button>
+      </p>
+    </div>
+  );
+});
diff --git a/packages/docs/pages/playground/counter/entry.server.tsx b/packages/docs/pages/playground/counter/entry.server.tsx
@@ -0,0 +1,6 @@
+import { renderToString, RenderToStringOptions } from '@builder.io/qwik/server';
+import { Root } from './root';
+
+export function render(opts: RenderToStringOptions) {
+  return renderToString(<Root />, opts);
+}
diff --git a/packages/docs/pages/playground/counter/root.tsx b/packages/docs/pages/playground/counter/root.tsx
@@ -0,0 +1,14 @@
+import { App } from './app';
+
+export const Root = () => {
+  return (
+    <html>
+      <head>
+        <title>Counter</title>
+      </head>
+      <body>
+        <App />
+      </body>
+    </html>
+  );
+};
diff --git a/packages/docs/src/components/app/global.css b/packages/docs/src/components/app/global.css
@@ -21,7 +21,7 @@ pre[class*='language-'] {
 
 html {
   --header-height: 56px;
-  --repl-tab-height: 40px;
+  --repl-tab-height: 56px;
   --repl-tab-bg-color: rgb(208, 208, 208);
 }
 

diff --git a/packages/docs/src/components/repl/monaco.tsx b/packages/docs/src/components/repl/monaco.tsx
@@ -202,7 +202,6 @@ const defaultEditorOpts: IStandaloneEditorConstructionOptions = {
   lineDecorationsWidth: 5,
   lineNumbersMinChars: 3,
   minimap: { enabled: false },
-  padding: { top: 15 },
   roundedSelection: false,
   scrollBeyondLastLine: false,
   tabSize: 2,

diff --git a/packages/docs/src/components/repl/repl-detail-panel.tsx b/packages/docs/src/components/repl/repl-detail-panel.tsx
@@ -1,11 +1,12 @@
 import { ReplOptions } from './repl-options';
 import { ReplTabButton } from './repl-tab-button';
+import { ReplTabButtons } from './repl-tab-buttons';
 import type { ReplStore } from './types';
 
 export const ReplDetailPanel = ({ store }: ReplDetailPanelProps) => {
   return (
     <div class="repl-panel repl-detail-panel">
-      <div class="repl-tab-buttons">
+      <ReplTabButtons>
         <ReplTabButton
           text="Options"
           isActive={store.selectedOutputDetail === 'options'}
@@ -21,26 +22,14 @@ export const ReplDetailPanel = ({ store }: ReplDetailPanelProps) => {
             store.selectedOutputDetail = 'network';
           }}
         /> */}
-
-        {/* <ReplTabButton
-          text="Usage"
-          isActive={store.selectedOutputDetail === 'usage'}
-          onClick$={() => {
-            store.selectedOutputDetail = 'usage';
-          }}
-        /> */}
-      </div>
+      </ReplTabButtons>
 
       <div class="repl-tab">
         {store.selectedOutputDetail === 'options' ? <ReplOptions store={store} /> : null}
 
         {/* {store.selectedOutputDetail === 'network' ? (
           <div class="output-detail detail-network">network</div>
         ) : null} */}
-
-        {/* {store.selectedOutputDetail === 'usage' ? (
-          <div class="output-detail detail-usage">usage</div>
-        ) : null} */}
       </div>
     </div>
   );

diff --git a/packages/docs/src/components/repl/repl-input-panel.tsx b/packages/docs/src/components/repl/repl-input-panel.tsx
@@ -1,6 +1,7 @@
 import type { QRL } from '@builder.io/qwik';
 import { Editor } from './editor';
 import { ReplTabButton } from './repl-tab-button';
+import { ReplTabButtons } from './repl-tab-buttons';
 import type { ReplStore } from './types';
 
 export const ReplInputPanel = ({
@@ -10,7 +11,7 @@ export const ReplInputPanel = ({
 }: ReplInputPanelProps) => {
   return (
     <div class="repl-panel repl-input-panel">
-      <div class="repl-tab-buttons">
+      <ReplTabButtons>
         {store.inputs.map((input) =>
           input.hidden ? null : (
             <ReplTabButton
@@ -28,7 +29,7 @@ export const ReplInputPanel = ({
             />
           )
         )}
-      </div>
+      </ReplTabButtons>
 
       <div class="repl-tab">
         <Editor

diff --git a/packages/docs/src/components/repl/repl-options.tsx b/packages/docs/src/components/repl/repl-options.tsx
@@ -1,6 +1,8 @@
 import type { ReplStore } from './types';
 
 export const ReplOptions = ({ store }: ReplOptionsProps) => {
+  const versions = filterVersions(store.versions, store.version);
+
   return (
     <div class="output-detail detail-options">
       <StoreOption
@@ -15,14 +17,46 @@ export const ReplOptions = ({ store }: ReplOptionsProps) => {
       <StoreOption
         label="Version"
         storeProp="version"
-        options={store.versions}
+        options={versions}
         store={store}
-        isLoading={!store.versions || store.versions.length === 0}
+        isLoading={versions.length === 0}
       />
     </div>
   );
 };
 
+const filterVersions = (versions: string[], version: string | undefined) => {
+  if (!versions) {
+    if (version) {
+      return [version];
+    } else {
+      return [];
+    }
+  }
+
+  return versions.filter((v) => {
+    if (v === version) {
+      return true;
+    }
+    if (v.includes('-')) {
+      return false;
+    }
+    const parts = v.split('.');
+    if (parts.length !== 3) {
+      return false;
+    }
+    if (isNaN(parts[2] as any)) {
+      return false;
+    }
+    if (parts[0] === '0' && parts[1] === '0') {
+      if (parseInt(parts[2], 10) < 20) {
+        return false;
+      }
+    }
+    return true;
+  });
+};
+
 const StoreOption = (props: StoreOptionProps) => {
   return (
     <label>

diff --git a/packages/docs/src/components/repl/repl-output-panel.tsx b/packages/docs/src/components/repl/repl-output-panel.tsx
@@ -1,12 +1,13 @@
 import { CodeBlock } from '../code-block/code-block';
 import { ReplOutputModles } from './repl-output-modules';
 import { ReplTabButton } from './repl-tab-button';
+import { ReplTabButtons } from './repl-tab-buttons';
 import type { ReplStore } from './types';
 
 export const ReplOutputPanel = ({ store }: ReplOutputPanelProps) => {
   return (
     <div class="repl-panel repl-output-panel">
-      <div class="repl-tab-buttons">
+      <ReplTabButtons>
         <ReplTabButton
           text="App"
           isActive={store.selectedOutputPanel === 'app'}
@@ -55,7 +56,7 @@ export const ReplOutputPanel = ({ store }: ReplOutputPanelProps) => {
             }}
           />
         ) : null}
-      </div>
+      </ReplTabButtons>
 
       <div
         class={{

diff --git a/packages/docs/src/components/repl/repl-tab-buttons.tsx b/packages/docs/src/components/repl/repl-tab-buttons.tsx
@@ -0,0 +1,11 @@
+export const ReplTabButtons = (props: ReplTabButtonsProps) => {
+  return (
+    <div class="repl-tab-buttons">
+      <div class="repl-tab-buttons-inner">{props.children}</div>
+    </div>
+  );
+};
+
+interface ReplTabButtonsProps {
+  children: any;
+}
diff --git a/packages/docs/src/components/repl/repl.css b/packages/docs/src/components/repl/repl.css
@@ -9,9 +9,19 @@
 }
 
 .repl-tab-buttons {
-  background-color: var(--repl-tab-bg-color);
   height: var(--repl-tab-height);
   font-size: 14px;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  background: linear-gradient(
+    var(--repl-tab-bg-color) 0% calc(var(--repl-tab-height) - 14px),
+    white 40px var(--repl-tab-height)
+  );
+}
+
+.repl-tab-buttons-inner {
+  height: calc(var(--repl-tab-height) - 14px);
 }
 
 .repl-tab {
@@ -37,7 +47,7 @@
 .repl-tab-button {
   display: inline-block;
   border-top: 4px solid transparent;
-  height: calc(var(--repl-tab-height) - 8px);
+  height: calc(var(--repl-tab-height) - 22px);
   margin: 8px 0 0 0;
   padding: 0;
   min-width: 70px;
@@ -141,11 +151,15 @@
 }
 
 .output-html {
-  padding: 15px 20px;
+  padding: 0 15px 15px 15px;
   height: 100%;
   overflow: auto;
 }
 
+.output-html pre {
+  height: 100%;
+}
+
 .repl-mode-production .output-html {
   white-space: pre-wrap;
 }
@@ -159,7 +173,7 @@
 }
 
 .output-modules .file-tree {
-  padding: 15px;
+  padding: 0 15px 15px 15px;
   grid-area: repl-file-tree;
   overflow-y: auto;
 }
@@ -203,6 +217,8 @@
   padding: 5px 10px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .output-modules .file-size {
@@ -240,7 +256,7 @@
 }
 
 .output-detail {
-  padding: 15px;
+  padding: 0 15px 15px 15px;
 }
 
 .detail-options label {