feat: add library tags example

DylanPiercey · DylanPiercey · commit f43ea8d2b16a · 2025-07-01T12:17:05.000-07:00
diff --git a/examples/library-tags-ts/.gitignore b/examples/library-tags-ts/.gitignore
@@ -0,0 +1,8 @@
+.vscode/settings.json
+*.DS_Store
+*.log
+*.tgz
+coverage
+dist
+node_modules
+.env
diff --git a/examples/library-tags-ts/.husky/.gitignore b/examples/library-tags-ts/.husky/.gitignore
@@ -0,0 +1,2 @@
+_
+.env
diff --git a/examples/library-tags-ts/.husky/pre-commit b/examples/library-tags-ts/.husky/pre-commit
@@ -0,0 +1 @@
+lint-staged && npm run build
diff --git a/examples/library-tags-ts/.lintstagedrc.json b/examples/library-tags-ts/.lintstagedrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/lintstagedrc.schema.json",
+  "*.{ts,js}": ["eslint --fix", "prettier --write"],
+  "*.css": ["stylelint --fix", "prettier --write"],
+  "*.{marko,html,json,md}": ["prettier --write"]
+}
diff --git a/examples/library-tags-ts/.postcssrc.json b/examples/library-tags-ts/.postcssrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/postcssrc.json",
+  "plugins": {
+    "postcss-auto-modules": {}
+  }
+}
diff --git a/examples/library-tags-ts/.prettierignore b/examples/library-tags-ts/.prettierignore
@@ -0,0 +1,7 @@
+__snapshots__
+.vscode
+CHANGELOG.md
+coverage
+dist
+node_modules
+package-lock.json
diff --git a/examples/library-tags-ts/.prettierrc.json b/examples/library-tags-ts/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-marko"]
+}
diff --git a/examples/library-tags-ts/.storybook/main.ts b/examples/library-tags-ts/.storybook/main.ts
@@ -0,0 +1,10 @@
+import type { StorybookConfig } from "@storybook/marko-vite";
+
+export default {
+  framework: "@storybook/marko-vite",
+  stories: ["../src/**/{,*.}stories.ts"],
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+} satisfies StorybookConfig;
diff --git a/examples/library-tags-ts/.stylelintignore b/examples/library-tags-ts/.stylelintignore
@@ -0,0 +1,4 @@
+__snapshots__
+coverage
+dist
+node_modules
diff --git a/examples/library-tags-ts/.stylelintrc.json b/examples/library-tags-ts/.stylelintrc.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json.schemastore.org/stylelintrc.json",
+  "extends": "stylelint-config-standard",
+  "allowEmptyInput": true,
+  "cache": true,
+  "rules": {
+    "import-notation": "string"
+  }
+}
diff --git a/examples/library-tags-ts/.vscode/extensions.json b/examples/library-tags-ts/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Marko-JS.marko-vscode",
+    "stylelint.vscode-stylelint"
+  ]
+}
diff --git a/examples/library-tags-ts/README.md b/examples/library-tags-ts/README.md
@@ -0,0 +1,17 @@
+# Starter Marko Library with TypeScript
+
+A template for component libraries and other reusable Marko packages.
+
+## Installation
+
+```sh
+npm init marko -- --template library-ts
+```
+
+## Overview
+
+This project is powered by [Marko](https://markojs.com), [Storybook](https://storybook.js.org), and [Vite](https://vitejs.dev).
+
+- Run `npm run storybook` to view the component storybook
+- Run `npm run test` to run tests with vitest
+- Run `npm run build` to build a production-ready library
diff --git a/examples/library-tags-ts/eslint.config.js b/examples/library-tags-ts/eslint.config.js
@@ -0,0 +1,31 @@
+import eslint from "@eslint/js";
+import sortImportPlugin from "eslint-plugin-simple-import-sort";
+import globals from "globals";
+import tslint from "typescript-eslint";
+
+export default tslint.config(
+  {
+    ignores: ["__snapshots__", "coverage", "dist", "node_modules"],
+  },
+  eslint.configs.recommended,
+  ...tslint.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    plugins: {
+      "simple-import-sort": sortImportPlugin,
+    },
+    rules: {
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+      "@typescript-eslint/no-import-type-side-effects": "error",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+);
diff --git a/examples/library-tags-ts/marko.json b/examples/library-tags-ts/marko.json
@@ -0,0 +1,3 @@
+{
+  "exports": "./dist/components"
+}
diff --git a/examples/library-tags-ts/package.json b/examples/library-tags-ts/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "library-ts",
+  "version": "0.0.0",
+  "description": "Marko library project with TypeScript",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "marko.json",
+    "!**/*.test.*",
+    "!*.tsbuildinfo",
+    "!**/{,*.}stories.*"
+  ],
+  "scripts": {
+    "@ci:build": "npm run build",
+    "@ci:lint": "npm run lint",
+    "@ci:test": "CI=true vitest --no-color",
+    "build": "mtc && postcss ./src/**/*.css -d dist --base src",
+    "clean": "rm -rf coverage dist node_modules/.{cache,vite,vitest}",
+    "format": "eslint --format unix --fix .; stylelint --formatter unix --fix '**/*.css'; prettier . --write --log-level=warn",
+    "lint": "mtc && eslint --format unix . && stylelint --formatter unix '**/*.css' && prettier . --check --log-level=warn",
+    "prepare": "husky",
+    "storybook": "storybook dev",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.0",
+    "@marko/compiler": "^5.39.28",
+    "@marko/testing-library": "^6.3.1",
+    "@marko/type-check": "^1.3.22",
+    "@marko/vite": "^5.1.7",
+    "@storybook/marko": "^10.0.0",
+    "@storybook/marko-vite": "^3.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-istanbul": "^3.2.4",
+    "eslint": "^9.30.0",
+    "eslint-formatter-unix": "^8.40.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^16.3.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
+    "marko": "^6.0.31",
+    "playwright": "^1.53.2",
+    "postcss-auto-modules": "^1.0.1",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-marko": "^3.1.12",
+    "prettier-plugin-packagejson": "^2.5.17",
+    "storybook": "^9.0.15",
+    "stylelint": "^16.21.0",
+    "stylelint-config-standard": "^38.0.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "marko": "5 - 6"
+  }
+}
diff --git a/examples/library-tags-ts/src/components/counter/__snapshots__/server.test.ts.snap b/examples/library-tags-ts/src/components/counter/__snapshots__/server.test.ts.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Default 1`] = `
+<button
+  class="_test_df99c5"
+>
+  0
+</button>
+`;
+
+exports[`Double 1`] = `
+<button
+  class="_test_df99c5"
+>
+  0
+</button>
+`;
diff --git a/examples/library-tags-ts/src/components/counter/browser.test.ts b/examples/library-tags-ts/src/components/counter/browser.test.ts
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@marko/testing-library";
+import { composeStories } from "@storybook/marko";
+
+import * as stories from "./stories";
+
+const { Default, Double } = composeStories(stories);
+
+test("Default", async () => {
+  const onIncrement = vi.fn();
+  await render(Default, { onIncrement });
+  const $btn = screen.getByRole("button");
+
+  expect($btn).toHaveTextContent("0");
+
+  await fireEvent.click($btn);
+
+  expect($btn).toHaveTextContent("1");
+  expect(onIncrement).toHaveBeenCalled();
+});
+
+test("Double", async () => {
+  const onIncrement = vi.fn();
+  await render(Double, { onIncrement });
+  const $btn = screen.getByRole("button");
+
+  expect($btn).toHaveTextContent("0");
+
+  await fireEvent.click($btn);
+
+  expect($btn).toHaveTextContent("2");
+  expect(onIncrement).toHaveBeenCalled();
+});
diff --git a/examples/library-tags-ts/src/components/counter/index.marko b/examples/library-tags-ts/src/components/counter/index.marko
@@ -0,0 +1,17 @@
+import style from "./styles.module.css";
+export interface Input {
+  multiplier?: number;
+  onIncrement?: () => void;
+}
+
+<let/count=0/>
+
+<button
+  class=style.test
+  onClick() {
+    count++;
+    input.onIncrement?.();
+  }
+>
+  ${count * (input.multiplier ?? 1)}
+</button>
diff --git a/examples/library-tags-ts/src/components/counter/server.test.ts b/examples/library-tags-ts/src/components/counter/server.test.ts
@@ -0,0 +1,11 @@
+import { normalize, render, screen } from "@marko/testing-library";
+import { composeStories } from "@storybook/marko";
+
+import * as stories from "./stories";
+
+for (const [name, story] of Object.entries(composeStories(stories))) {
+  test(name, async () => {
+    await render(story);
+    expect(normalize(screen.getByRole("button"))).toMatchSnapshot();
+  });
+}
diff --git a/examples/library-tags-ts/src/components/counter/stories.ts b/examples/library-tags-ts/src/components/counter/stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, Story } from "@storybook/marko";
+
+import Template, { type Input } from "./index.marko";
+
+export default {
+  title: "Counter",
+  component: Template,
+  argTypes: {
+    multiplier: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+} as Meta<Input>;
+
+export const Default: Story<Input> = {
+  args: {},
+};
+
+export const Double: Story<Input> = {
+  args: {
+    multiplier: 2,
+  },
+};
diff --git a/examples/library-tags-ts/src/components/counter/styles.module.css b/examples/library-tags-ts/src/components/counter/styles.module.css
@@ -0,0 +1,3 @@
+.test {
+  color: blue;
+}
diff --git a/examples/library-tags-ts/src/types.d.ts b/examples/library-tags-ts/src/types.d.ts
@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: { [className: string]: string };
+  export default content;
+}
diff --git a/examples/library-tags-ts/tsconfig.json b/examples/library-tags-ts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "incremental": true,
+    "lib": ["dom", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
+    "types": ["vite/client", "vitest/globals", "@vitest/browser/matchers"],
+    "verbatimModuleSyntax": true
+  }
+}
diff --git a/examples/library-tags-ts/vitest.config.ts b/examples/library-tags-ts/vitest.config.ts
@@ -0,0 +1,37 @@
+import marko from "@marko/vite";
+import { defineConfig } from "vitest/config";
+const isCI = !!process.env.CI;
+
+export default defineConfig({
+  plugins: [marko()],
+  test: {
+    globals: true,
+    coverage: {
+      enabled: isCI,
+      provider: "istanbul",
+      include: ["src/**/*"],
+    },
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: "server",
+          environment: "node",
+          include: ["src/**/{,*.}server.test.ts"],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "browser",
+          browser: {
+            enabled: true,
+            provider: isCI ? "playwright" : "preview",
+            instances: [{ browser: "chromium" }],
+          },
+          include: ["src/**/{,*.}browser.test.ts"],
+        },
+      },
+    ],
+  },
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "$schema": "https://json.schemastore.org/prettierrc",
 +  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-marko"]
 +}