QwikDev · thejackshelton · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -7,5 +7,11 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@qwikdev/astro-website", "astro-deno-demo", "astro-node-demo", "astro-demo"]
+  "ignore": [
+    "@qwikdev/astro-website",
+    "astro-deno-demo",
+    "astro-node-demo",
+    "astro-demo",
+    "demo-lib"
+  ]
 }
diff --git a/apps/demo/src/components/qwik/counter.tsx b/apps/demo/src/components/qwik/counter.tsx
@@ -4,10 +4,8 @@ export const Counter = component$<{ initial: number }>((props) => {
   const counter = useSignal(props.initial);
 
   return (
-    <>
-      <button type="button" onClick$={() => counter.value++}>
-        <Slot /> {counter.value}
-      </button>
-    </>
+    <button type="button" onClick$={() => counter.value++}>
+      <Slot /> {counter.value}
+    </button>
   );
 });
diff --git a/apps/node-demo/package.json b/apps/node-demo/package.json
@@ -20,6 +20,7 @@
     "@types/react-dom": "^18.2.21",
     "astro": "^4.12.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "demo-lib": "workspace:*"
   }
 }
diff --git a/apps/node-demo/src/pages/index.astro b/apps/node-demo/src/pages/index.astro
@@ -1,6 +1,5 @@
 ---
-import { Counter } from "@components/qwik/counter";
-import { SayHi } from "@components/qwik/say-hi";
+import { Counter } from "demo-lib";
 ---
 
 <html lang="en">
@@ -13,9 +12,7 @@ import { SayHi } from "@components/qwik/say-hi";
 	</head>
 	<body>
 		<div style={{ height: '1000px' }}>
-			<Counter initial={5}>Yo</Counter>
-			<SayHi>John</SayHi>
-			<a href="/test">test</a>
+			<Counter />
 		</div>
 	</body>
 </html>
diff --git a/apps/node-demo/tsconfig.json b/apps/node-demo/tsconfig.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@components/*": ["./src/components/*"]
+      "@components/*": ["./src/components/*"],
+      "demo-lib": ["../../libs/demo-lib"]
     },
 
     "jsx": "react-jsx",

diff --git a/libs/demo-lib/.eslintignore b/libs/demo-lib/.eslintignore
@@ -0,0 +1,31 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
diff --git a/libs/demo-lib/.eslintrc.cjs b/libs/demo-lib/.eslintrc.cjs
@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended"
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prefer-spread": "off",
+    "no-case-declarations": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": ["error"]
+  }
+};
diff --git a/libs/demo-lib/.gitignore b/libs/demo-lib/.gitignore
@@ -0,0 +1,38 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+
+# Cache
+.cache
+.mf
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases
diff --git a/libs/demo-lib/.prettierignore b/libs/demo-lib/.prettierignore
@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules
diff --git a/libs/demo-lib/README.md b/libs/demo-lib/README.md
@@ -0,0 +1,47 @@
+# Qwik Library ⚡️
+
+- [Qwik Docs](https://qwik.dev/)
+- [Discord](https://qwik.dev/chat)
+- [Qwik on GitHub](https://github.com/QwikDev/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+- [Partytown](https://partytown.builder.io/)
+- [Mitosis](https://github.com/BuilderIO/mitosis)
+- [Builder.io](https://www.builder.io/)
+
+---
+
+## Project Structure
+
+Inside your project, you'll see the following directories and files:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── index.ts
+```
+
+- `src/components`: Recommended directory for components.
+
+- `index.ts`: The entry point of your component library, make sure all the public components are exported from this file.
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). For Qwik during development, the `dev` command will also server-side render (SSR) the output. The client-side development modules are loaded by the browser.
+
+```
+pnpm dev
+```
+
+> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
+
+## Production
+
+The production build should generate the production build of your component library in (./lib) and the typescript type definitions in (./lib-types).
+
+```
+pnpm build
+```
diff --git a/libs/demo-lib/package.json b/libs/demo-lib/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "demo-lib",
+  "version": "0.0.1",
+  "description": "Create a Qwik library",
+  "main": "./lib/index.qwik.mjs",
+  "qwik": "./lib/index.qwik.mjs",
+  "types": "./lib-types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.qwik.mjs",
+      "require": "./lib/index.qwik.cjs",
+      "types": "./lib-types/index.d.ts"
+    }
+  },
+  "files": ["lib", "lib-types"],
+  "engines": {
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+  },
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build.lib": "vite build --mode lib",
+    "build.types": "tsc --emitDeclarationOnly",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "np",
+    "start": "vite --open --mode ssr",
+    "test": "echo \"No test specified\" && exit 0",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "^1.7.3",
+    "@types/eslint": "^8.56.10",
+    "@types/node": "^20.12.7",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-qwik": "latest",
+    "np": "^8.0.4",
+    "prettier": "^3.2.5",
+    "typescript": "5.4.5",
+    "undici": "*",
+    "vite": "^5.2.10",
+    "vite-tsconfig-paths": "^4.2.1"
+  }
+}
diff --git a/libs/demo-lib/src/components/counter/counter.tsx b/libs/demo-lib/src/components/counter/counter.tsx
@@ -0,0 +1,16 @@
+import { component$, useSignal } from "@builder.io/qwik";
+
+export const Counter = component$(() => {
+  const count = useSignal(0);
+
+  return (
+    <div>
+      <p>Count: {count.value}</p>
+      <p>
+        <button type="button" onClick$={() => count.value++}>
+          Increment
+        </button>
+      </p>
+    </div>
+  );
+});
diff --git a/libs/demo-lib/src/components/logo/logo.tsx b/libs/demo-lib/src/components/logo/logo.tsx
@@ -0,0 +1,16 @@
+import { component$ } from "@builder.io/qwik";
+
+export const Logo = component$(() => {
+  return (
+    <div>
+      <a href="https://qwik.dev/">
+        <img
+          alt="Qwik Logo"
+          width={400}
+          height={147}
+          src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
+        />
+      </a>
+    </div>
+  );
+});
diff --git a/libs/demo-lib/src/entry.dev.tsx b/libs/demo-lib/src/entry.dev.tsx
@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { type RenderOptions, render } from "@builder.io/qwik";
+import Root from "./root";
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}
diff --git a/libs/demo-lib/src/entry.ssr.tsx b/libs/demo-lib/src/entry.ssr.tsx
@@ -0,0 +1,22 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { type RenderToStreamOptions, renderToStream } from "@builder.io/qwik/server";
+import { manifest } from "@qwik-client-manifest";
+import Root from "./root";
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts
+  });
+}
diff --git a/libs/demo-lib/src/index.ts b/libs/demo-lib/src/index.ts
@@ -0,0 +1,2 @@
+export { Logo } from "./components/logo/logo";
+export { Counter } from "./components/counter/counter";
diff --git a/libs/demo-lib/src/root.tsx b/libs/demo-lib/src/root.tsx
@@ -0,0 +1,17 @@
+import { Counter } from "./components/counter/counter";
+import { Logo } from "./components/logo/logo";
+
+export default () => {
+  return (
+    <>
+      <head>
+        <meta charset="utf-8" />
+        <title>Qwik Blank App</title>
+      </head>
+      <body>
+        <Logo />
+        <Counter />
+      </body>
+    </>
+  );
+};