chore: template setup

configured with: - solid-js - tsup - bun - nvm - typescript - vitest - eslint - prettier
thedanchez · Sep 18, 2024 · 9c1b993 · 9c1b993
commit 9c1b993
Show file tree

Hide file tree

Showing 19 changed files with 404 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["simple-import-sort", "solid"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:solid/typescript"
+  ],
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "no-unused-vars": "off",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
+  },
+  "ignorePatterns": ["dist", "node_modules"]
+}
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+thedanchez
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -0,0 +1,29 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  quality-checks:
+    name: Quality Checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - name: Install Dependencies
+        run: bun install --frozen-lockfile
+      - name: Lint Check
+        run: bun run lint
+      - name: Format Check
+        run: bun run format
+      - name: Test Coverage Check
+        run: bun run test
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+coverage
+dist
+node_modules
+
+.DS_Store
+/*.tgz
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+20.17.0
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+coverage
+dist
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always"
+  },
+  "editor.formatOnSave": true,
+  "editor.rulers": [120],
+  "files.autoSave": "onFocusChange",
+  "files.insertFinalNewline": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,58 @@
+# Template SolidJS
+
+Template for SolidJS package using `tsup` for bundling.
+
+## Getting Started
+
+Some pre-requisites before install dependencies:
+
+- Install Node Version Manager (NVM)
+  ```bash
+  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+  ```
+- Install Bun
+  ```bash
+  curl -fsSL https://bun.sh/install | bash
+  ```
+
+### Installing Dependencies
+
+```bash
+nvm use
+bun install
+```
+
+### Local Development Build
+
+```bash
+bun start
+```
+
+### Linting & Formatting
+
+```bash
+bun run lint    # checks source for lint violations
+bun run format  # checks source for format violations
+
+bun run lint:fix    # fixes lint violations
+bun run format:fix  # fixes format violations
+```
+
+### Unit Testing
+
+> We use [Solid Testing Library](https://github.com/solidjs/solid-testing-library) for integration style unit tests
+
+```bash
+bun run test
+bun run test:cov  # with test coverage
+```
+
+### Contributing
+
+The only requirements when contributing are:
+
+- You keep a clean git history in your branch
+  - rebasing `main` instead of making merge commits.
+- Using proper commit message formats that adhere to [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
+  - Additionally, squashing (via rebase) commits that are not [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
+- CI checks pass before merging into `main`
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "template-solidjs",
+  "version": "0.0.0",
+  "description": "Template for SolidJS package using tsup for bundling. Configured with Bun, NVM, TypeScript, ESLint, Prettier, Vitest, and GHA",
+  "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "dev": "vite",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "serve": "vite preview",
+    "start": "vite",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.9",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@types/bun": "^1.1.9",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "@typescript-eslint/parser": "^8.6.0",
+    "@vitest/coverage-istanbul": "^2.1.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-solid": "^0.14.3",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.3.3",
+    "tsup": "^8.2.4",
+    "tsup-preset-solid": "^2.2.0",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vite-plugin-solid": "^2.10.2",
+    "vitest": "^2.1.1"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.22"
+  }
+}
diff --git a/setupTests.ts b/setupTests.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";
diff --git a/src/__tests__/todo-list.test.tsx b/src/__tests__/todo-list.test.tsx
@@ -0,0 +1,36 @@
+import { fireEvent, render } from "@solidjs/testing-library";
+import { describe, expect, test } from "vitest";
+
+import { TodoList } from "../todo-list";
+
+describe("<TodoList />", () => {
+  test("it will render an text input and a button", () => {
+    const { getByPlaceholderText, getByText } = render(() => <TodoList />);
+    expect(getByPlaceholderText("new todo here")).toBeInTheDocument();
+    expect(getByText("Add Todo")).toBeInTheDocument();
+  });
+
+  test("it will add a new todo", async () => {
+    const { getByPlaceholderText, getByText } = render(() => <TodoList />);
+    const input = getByPlaceholderText("new todo here") as HTMLInputElement;
+    const button = getByText("Add Todo");
+    input.value = "test new todo";
+    fireEvent.click(button as HTMLInputElement);
+    expect(input.value).toBe("");
+    expect(getByText(/test new todo/)).toBeInTheDocument();
+  });
+
+  test("it will mark a todo as completed", async () => {
+    const { getByPlaceholderText, findByRole, getByText } = render(() => <TodoList />);
+    const input = getByPlaceholderText("new todo here") as HTMLInputElement;
+    const button = getByText("Add Todo") as HTMLButtonElement;
+    input.value = "mark new todo as completed";
+    fireEvent.click(button);
+    const completed = (await findByRole("checkbox")) as HTMLInputElement;
+    expect(completed?.checked).toBe(false);
+    fireEvent.click(completed);
+    expect(completed?.checked).toBe(true);
+    const text = getByText("mark new todo as completed") as HTMLSpanElement;
+    expect(text).toHaveStyle({ "text-decoration": "line-through" });
+  });
+});
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,13 @@
+import { render } from "solid-js/web";
+
+import { TodoList } from "./todo-list";
+
+const root = document.getElementById("root");
+
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error(
+    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
+  );
+}
+
+render(() => <TodoList />, root!);
diff --git a/src/todo-list.tsx b/src/todo-list.tsx
@@ -0,0 +1,61 @@
+import { createSignal, For } from "solid-js";
+import { createStore } from "solid-js/store";
+
+type Todo = { id: number; text: string; completed: boolean };
+
+export const TodoList = () => {
+  let input!: HTMLInputElement;
+
+  const [count, setCount] = createSignal(0);
+  const [todos, setTodos] = createStore<Todo[]>([]);
+
+  const addTodo = (text: string) => {
+    setTodos(todos.length, { id: todos.length, text, completed: false });
+  };
+
+  const toggleTodo = (id: number) => {
+    setTodos(id, "completed", (c) => !c);
+  };
+
+  return (
+    <>
+      <div>
+        <div>Count: {count()}</div>
+        <button
+          onClick={() => {
+            setCount((prev) => prev + 1);
+          }}
+        >
+          Increment Count
+        </button>
+        <input placeholder="new todo here" ref={input} />
+        <button
+          onClick={() => {
+            if (!input.value.trim()) return;
+            addTodo(input.value);
+            input.value = "";
+          }}
+        >
+          Add Todo
+        </button>
+      </div>
+      <For each={todos}>
+        {(todo) => {
+          const { id, text } = todo;
+          return (
+            <div>
+              <input type="checkbox" checked={todo.completed} onChange={[toggleTodo, id]} />
+              <span
+                style={{
+                  "text-decoration": todo.completed ? "line-through" : "none",
+                }}
+              >
+                {text}
+              </span>
+            </div>
+          );
+        }}
+      </For>
+    </>
+  );
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    /* JSX */
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+
+    /* Types */
+    "types": ["vite/client", "bun-types", "@testing-library/jest-dom"]
+  },
+  "exclude": ["node_modules", "coverage", "dist"]
+}
diff --git a/tsup.config.ts b/tsup.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from "tsup";
+import * as preset from "tsup-preset-solid";
+
+const generateSolidPresetOptions = (watching: boolean): preset.PresetOptions => ({
+  entries: [
+    {
+      // entries with '.tsx' extension will have `solid` export condition generated
+      entry: "src/index.tsx",
+      dev_entry: false,
+      server_entry: true,
+    },
+  ],
+  drop_console: !watching, // remove all `console.*` calls and `debugger` statements in prod builds
+  cjs: false,
+});
+
+export default defineConfig((config) => {
+  const watching = !!config.watch;
+  const solidPresetOptions = generateSolidPresetOptions(watching);
+  const parsedOptions = preset.parsePresetOptions(solidPresetOptions, watching);
+
+  if (!watching) {
+    const packageFields = preset.generatePackageExports(parsedOptions);
+    // console.log(`\npackage.json: \n${JSON.stringify(packageFields, null, 2)}\n\n`);
+    /* will update ./package.json with the correct export fields */
+    preset.writePackageJson(packageFields);
+  }
+
+  const tsupOptions = preset
+    .generateTsupOptions(parsedOptions)
+    .map((tsupOption) => ({ name: "solid-js", ...tsupOption }));
+
+  return tsupOptions;
+});