From dd9c9ad902d67f02e08179cd8ebc3e6c0a280c16 Mon Sep 17 00:00:00 2001 From: Dominik Milacher Date: Fri, 13 Jun 2025 14:31:37 +0200 Subject: [PATCH] Generate ui library --- packages/ui/.editorconfig | 12 +++ packages/ui/.github/workflows/ci.yml | 49 +++++++++++ packages/ui/.gitignore | 56 +++++++++++++ packages/ui/.npmrc | 2 + packages/ui/.vscode/settings.json | 3 + packages/ui/README.md | 84 +++++++++++++++++++ packages/ui/eslint.config.mjs | 20 +++++ packages/ui/nuxt.config.ts | 4 + packages/ui/package.json | 58 +++++++++++-- packages/ui/playground/app.vue | 8 ++ packages/ui/playground/nuxt.config.ts | 5 ++ packages/ui/playground/package.json | 13 +++ packages/ui/playground/server/tsconfig.json | 3 + packages/ui/playground/tsconfig.json | 3 + packages/ui/src/module.ts | 19 +++++ packages/ui/src/runtime/plugin.ts | 5 ++ packages/ui/src/runtime/server/tsconfig.json | 3 + packages/ui/test/basic.test.ts | 15 ++++ packages/ui/test/fixtures/basic/app.vue | 6 ++ .../ui/test/fixtures/basic/nuxt.config.ts | 7 ++ packages/ui/test/fixtures/basic/package.json | 5 ++ packages/ui/tsconfig.json | 9 +- packages/{ui => ui1}/.eslintrc.js | 0 packages/{ui => ui1}/index.ts | 0 packages/ui1/package.json | 15 ++++ packages/{ui => ui1}/src/assets/circles.svg | 0 packages/{ui => ui1}/src/assets/next.svg | 0 packages/{ui => ui1}/src/assets/turborepo.svg | 0 packages/{ui => ui1}/src/assets/vercel.svg | 0 packages/{ui => ui1}/src/card.vue | 0 packages/{ui => ui1}/src/gradient.vue | 0 packages/{ui => ui1}/src/page.vue | 0 packages/ui1/tsconfig.json | 5 ++ 33 files changed, 398 insertions(+), 11 deletions(-) create mode 100644 packages/ui/.editorconfig create mode 100644 packages/ui/.github/workflows/ci.yml create mode 100644 packages/ui/.gitignore create mode 100644 packages/ui/.npmrc create mode 100644 packages/ui/.vscode/settings.json create mode 100644 packages/ui/README.md create mode 100644 packages/ui/eslint.config.mjs create mode 100644 packages/ui/nuxt.config.ts create mode 100644 packages/ui/playground/app.vue create mode 100644 packages/ui/playground/nuxt.config.ts create mode 100644 packages/ui/playground/package.json create mode 100644 packages/ui/playground/server/tsconfig.json create mode 100644 packages/ui/playground/tsconfig.json create mode 100644 packages/ui/src/module.ts create mode 100644 packages/ui/src/runtime/plugin.ts create mode 100644 packages/ui/src/runtime/server/tsconfig.json create mode 100644 packages/ui/test/basic.test.ts create mode 100644 packages/ui/test/fixtures/basic/app.vue create mode 100644 packages/ui/test/fixtures/basic/nuxt.config.ts create mode 100644 packages/ui/test/fixtures/basic/package.json rename packages/{ui => ui1}/.eslintrc.js (100%) rename packages/{ui => ui1}/index.ts (100%) create mode 100644 packages/ui1/package.json rename packages/{ui => ui1}/src/assets/circles.svg (100%) rename packages/{ui => ui1}/src/assets/next.svg (100%) rename packages/{ui => ui1}/src/assets/turborepo.svg (100%) rename packages/{ui => ui1}/src/assets/vercel.svg (100%) rename packages/{ui => ui1}/src/card.vue (100%) rename packages/{ui => ui1}/src/gradient.vue (100%) rename packages/{ui => ui1}/src/page.vue (100%) create mode 100644 packages/ui1/tsconfig.json diff --git a/packages/ui/.editorconfig b/packages/ui/.editorconfig new file mode 100644 index 0000000..007463b --- /dev/null +++ b/packages/ui/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +indent_size = 2 +indent_style = space +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/ui/.github/workflows/ci.yml b/packages/ui/.github/workflows/ci.yml new file mode 100644 index 0000000..4425eb0 --- /dev/null +++ b/packages/ui/.github/workflows/ci.yml @@ -0,0 +1,49 @@ +name: ci + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 20 + + - run: npm i -g --force corepack@latest && corepack enable + + - name: Install dependencies + run: npx nypm@latest i + + - name: Lint + run: npm run lint + + test: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 20 + + - run: npm i -g --force corepack@latest && corepack enable + + - name: Install dependencies + run: npx nypm@latest i + + - name: Playground prepare + run: npm run dev:prepare + + - name: Test + run: npm run test diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore new file mode 100644 index 0000000..7a3eb22 --- /dev/null +++ b/packages/ui/.gitignore @@ -0,0 +1,56 @@ +# Dependencies +node_modules + +# Logs +*.log* + +# Temp directories +.temp +.tmp +.cache + +# Yarn +**/.yarn/cache +**/.yarn/*state* + +# Generated dirs +dist + +# Nuxt +.nuxt +.output +.data +.vercel_build_output +.build-* +.netlify + +# Env +.env + +# Testing +reports +coverage +*.lcov +.nyc_output + +# VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Intellij idea +*.iml +.idea + +# OSX +.DS_Store +.AppleDouble +.LSOverride +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk diff --git a/packages/ui/.npmrc b/packages/ui/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/packages/ui/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/packages/ui/.vscode/settings.json b/packages/ui/.vscode/settings.json new file mode 100644 index 0000000..eb8204b --- /dev/null +++ b/packages/ui/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "eslint.experimental.useFlatConfig": true +} diff --git a/packages/ui/README.md b/packages/ui/README.md new file mode 100644 index 0000000..b168aa1 --- /dev/null +++ b/packages/ui/README.md @@ -0,0 +1,84 @@ + + +# My Module + +[![npm version][npm-version-src]][npm-version-href] +[![npm downloads][npm-downloads-src]][npm-downloads-href] +[![License][license-src]][license-href] +[![Nuxt][nuxt-src]][nuxt-href] + +My new Nuxt module for doing amazing things. + +- [✨  Release Notes](/CHANGELOG.md) + + + +## Features + + +- ⛰  Foo +- 🚠  Bar +- 🌲  Baz + +## Quick Setup + +Install the module to your Nuxt application with one command: + +```bash +npx nuxi module add my-module +``` + +That's it! You can now use My Module in your Nuxt app ✨ + + +## Contribution + +
+ Local development + + ```bash + # Install dependencies + npm install + + # Generate type stubs + npm run dev:prepare + + # Develop with the playground + npm run dev + + # Build the playground + npm run dev:build + + # Run ESLint + npm run lint + + # Run Vitest + npm run test + npm run test:watch + + # Release new version + npm run release + ``` + +
+ + + +[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82 +[npm-version-href]: https://npmjs.com/package/my-module + +[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82 +[npm-downloads-href]: https://npm.chart.dev/my-module + +[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82 +[license-href]: https://npmjs.com/package/my-module + +[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js +[nuxt-href]: https://nuxt.com diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs new file mode 100644 index 0000000..27b2e71 --- /dev/null +++ b/packages/ui/eslint.config.mjs @@ -0,0 +1,20 @@ +// @ts-check +import { createConfigForNuxt } from '@nuxt/eslint-config/flat' + +// Run `npx @eslint/config-inspector` to inspect the resolved config interactively +export default createConfigForNuxt({ + features: { + // Rules for module authors + tooling: true, + // Rules for formatting + stylistic: true, + }, + dirs: { + src: [ + './playground', + ], + }, +}) + .append( + // your custom flat config here... + ) diff --git a/packages/ui/nuxt.config.ts b/packages/ui/nuxt.config.ts new file mode 100644 index 0000000..c9cee63 --- /dev/null +++ b/packages/ui/nuxt.config.ts @@ -0,0 +1,4 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + modules: ["@nuxt/fonts", "@nuxt/icon", "@nuxt/image", "@nuxt/ui"] +}) \ No newline at end of file diff --git a/packages/ui/package.json b/packages/ui/package.json index 37f7cab..ab1549a 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,15 +1,57 @@ { - "name": "ui", + "name": "@websites/ui", "version": "0.0.0", - "private": true, - "main": "./index.ts", - "types": "./index.ts", + "description": "My new Nuxt module", + "repository": "your-org/my-module", + "license": "MIT", + "type": "module", + "exports": { + ".": { + "types": "./dist/types.d.mts", + "import": "./dist/module.mjs" + } + }, + "main": "./dist/module.mjs", + "typesVersions": { + "*": { + ".": [ + "./dist/types.d.mts" + ] + } + }, + "files": [ + "dist" + ], "scripts": { - "lint": "eslint ." + "prepack": "nuxt-module-build build", + "dev": "npm run dev:prepare && nuxi dev playground", + "dev:build": "nuxi build playground", + "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", + "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags", + "lint": "eslint .", + "test": "vitest run", + "test:watch": "vitest watch", + "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit" + }, + "dependencies": { + "@nuxt/kit": "^3.17.5" }, "devDependencies": { - "eslint-config-custom": "workspace:*", - "tsconfig": "workspace:*", - "vue": "^3.4.21" + "@nuxt/devtools": "^2.5.0", + "@nuxt/eslint-config": "^1.4.1", + "@nuxt/fonts": "0.11.4", + "@nuxt/icon": "1.13.0", + "@nuxt/image": "1.10.0", + "@nuxt/module-builder": "^1.0.1", + "@nuxt/schema": "^3.17.5", + "@nuxt/test-utils": "^3.19.1", + "@nuxt/ui": "3.1.3", + "@types/node": "latest", + "changelogen": "^0.6.1", + "eslint": "^9.28.0", + "nuxt": "^3.17.5", + "typescript": "~5.8.3", + "vitest": "^3.2.3", + "vue-tsc": "^2.2.10" } } diff --git a/packages/ui/playground/app.vue b/packages/ui/playground/app.vue new file mode 100644 index 0000000..58db5ce --- /dev/null +++ b/packages/ui/playground/app.vue @@ -0,0 +1,8 @@ + + + diff --git a/packages/ui/playground/nuxt.config.ts b/packages/ui/playground/nuxt.config.ts new file mode 100644 index 0000000..4c483e3 --- /dev/null +++ b/packages/ui/playground/nuxt.config.ts @@ -0,0 +1,5 @@ +export default defineNuxtConfig({ + modules: ['../src/module'], + myModule: {}, + devtools: { enabled: true }, +}) diff --git a/packages/ui/playground/package.json b/packages/ui/playground/package.json new file mode 100644 index 0000000..cf45ca0 --- /dev/null +++ b/packages/ui/playground/package.json @@ -0,0 +1,13 @@ +{ + "private": true, + "name": "my-module-playground", + "type": "module", + "scripts": { + "dev": "nuxi dev", + "build": "nuxi build", + "generate": "nuxi generate" + }, + "dependencies": { + "nuxt": "^3.17.5" + } +} diff --git a/packages/ui/playground/server/tsconfig.json b/packages/ui/playground/server/tsconfig.json new file mode 100644 index 0000000..b9ed69c --- /dev/null +++ b/packages/ui/playground/server/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../.nuxt/tsconfig.server.json" +} diff --git a/packages/ui/playground/tsconfig.json b/packages/ui/playground/tsconfig.json new file mode 100644 index 0000000..4b34df1 --- /dev/null +++ b/packages/ui/playground/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.nuxt/tsconfig.json" +} diff --git a/packages/ui/src/module.ts b/packages/ui/src/module.ts new file mode 100644 index 0000000..7d9c192 --- /dev/null +++ b/packages/ui/src/module.ts @@ -0,0 +1,19 @@ +import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit' + +// Module options TypeScript interface definition +export interface ModuleOptions {} + +export default defineNuxtModule({ + meta: { + name: 'my-module', + configKey: 'myModule', + }, + // Default configuration options of the Nuxt module + defaults: {}, + setup(_options, _nuxt) { + const resolver = createResolver(import.meta.url) + + // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack` + addPlugin(resolver.resolve('./runtime/plugin')) + }, +}) diff --git a/packages/ui/src/runtime/plugin.ts b/packages/ui/src/runtime/plugin.ts new file mode 100644 index 0000000..df7fd87 --- /dev/null +++ b/packages/ui/src/runtime/plugin.ts @@ -0,0 +1,5 @@ +import { defineNuxtPlugin } from '#app' + +export default defineNuxtPlugin((_nuxtApp) => { + console.log('Plugin injected by my-module!') +}) diff --git a/packages/ui/src/runtime/server/tsconfig.json b/packages/ui/src/runtime/server/tsconfig.json new file mode 100644 index 0000000..e95a776 --- /dev/null +++ b/packages/ui/src/runtime/server/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../../.nuxt/tsconfig.server.json", +} diff --git a/packages/ui/test/basic.test.ts b/packages/ui/test/basic.test.ts new file mode 100644 index 0000000..5167cad --- /dev/null +++ b/packages/ui/test/basic.test.ts @@ -0,0 +1,15 @@ +import { fileURLToPath } from 'node:url' +import { describe, it, expect } from 'vitest' +import { setup, $fetch } from '@nuxt/test-utils/e2e' + +describe('ssr', async () => { + await setup({ + rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)), + }) + + it('renders the index page', async () => { + // Get response to a server-rendered page with `$fetch`. + const html = await $fetch('/') + expect(html).toContain('
basic
') + }) +}) diff --git a/packages/ui/test/fixtures/basic/app.vue b/packages/ui/test/fixtures/basic/app.vue new file mode 100644 index 0000000..29a9c81 --- /dev/null +++ b/packages/ui/test/fixtures/basic/app.vue @@ -0,0 +1,6 @@ + + + diff --git a/packages/ui/test/fixtures/basic/nuxt.config.ts b/packages/ui/test/fixtures/basic/nuxt.config.ts new file mode 100644 index 0000000..ed0c53f --- /dev/null +++ b/packages/ui/test/fixtures/basic/nuxt.config.ts @@ -0,0 +1,7 @@ +import MyModule from '../../../src/module' + +export default defineNuxtConfig({ + modules: [ + MyModule, + ], +}) diff --git a/packages/ui/test/fixtures/basic/package.json b/packages/ui/test/fixtures/basic/package.json new file mode 100644 index 0000000..decd433 --- /dev/null +++ b/packages/ui/test/fixtures/basic/package.json @@ -0,0 +1,5 @@ +{ + "private": true, + "name": "basic", + "type": "module" +} diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index e1e7a92..59ad4a8 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -1,5 +1,8 @@ { - "extends": "tsconfig/vue.json", - "include": ["."], - "exclude": ["dist", "build", "node_modules"] + "extends": "./.nuxt/tsconfig.json", + "exclude": [ + "dist", + "node_modules", + "playground", + ] } diff --git a/packages/ui/.eslintrc.js b/packages/ui1/.eslintrc.js similarity index 100% rename from packages/ui/.eslintrc.js rename to packages/ui1/.eslintrc.js diff --git a/packages/ui/index.ts b/packages/ui1/index.ts similarity index 100% rename from packages/ui/index.ts rename to packages/ui1/index.ts diff --git a/packages/ui1/package.json b/packages/ui1/package.json new file mode 100644 index 0000000..37f7cab --- /dev/null +++ b/packages/ui1/package.json @@ -0,0 +1,15 @@ +{ + "name": "ui", + "version": "0.0.0", + "private": true, + "main": "./index.ts", + "types": "./index.ts", + "scripts": { + "lint": "eslint ." + }, + "devDependencies": { + "eslint-config-custom": "workspace:*", + "tsconfig": "workspace:*", + "vue": "^3.4.21" + } +} diff --git a/packages/ui/src/assets/circles.svg b/packages/ui1/src/assets/circles.svg similarity index 100% rename from packages/ui/src/assets/circles.svg rename to packages/ui1/src/assets/circles.svg diff --git a/packages/ui/src/assets/next.svg b/packages/ui1/src/assets/next.svg similarity index 100% rename from packages/ui/src/assets/next.svg rename to packages/ui1/src/assets/next.svg diff --git a/packages/ui/src/assets/turborepo.svg b/packages/ui1/src/assets/turborepo.svg similarity index 100% rename from packages/ui/src/assets/turborepo.svg rename to packages/ui1/src/assets/turborepo.svg diff --git a/packages/ui/src/assets/vercel.svg b/packages/ui1/src/assets/vercel.svg similarity index 100% rename from packages/ui/src/assets/vercel.svg rename to packages/ui1/src/assets/vercel.svg diff --git a/packages/ui/src/card.vue b/packages/ui1/src/card.vue similarity index 100% rename from packages/ui/src/card.vue rename to packages/ui1/src/card.vue diff --git a/packages/ui/src/gradient.vue b/packages/ui1/src/gradient.vue similarity index 100% rename from packages/ui/src/gradient.vue rename to packages/ui1/src/gradient.vue diff --git a/packages/ui/src/page.vue b/packages/ui1/src/page.vue similarity index 100% rename from packages/ui/src/page.vue rename to packages/ui1/src/page.vue diff --git a/packages/ui1/tsconfig.json b/packages/ui1/tsconfig.json new file mode 100644 index 0000000..e1e7a92 --- /dev/null +++ b/packages/ui1/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "tsconfig/vue.json", + "include": ["."], + "exclude": ["dist", "build", "node_modules"] +}