@nuxt/module-builder 0.0.0 → 0.1.4

package/README.md

@@ -1,18 +1,117 @@
-# Nuxt Module Builder
+# 📦 Nuxt Module Builder
 
-> Build Nuxt modules using [unjs/unbuild](https://github.com/unjs/unbuild).
+> Complete solution to build Nuxt Modules.
 
-## Usage
+**🧪 This tool is still under heavy development for Nuxt3. Feedback is more than welcome!**
 
-- Install `@nuxt/module-builder` as a devDependency
-- Use `npx nuxt-build-module` to build module
+## Features
 
-Note: Module structure needs `src/module.ts` and optional `src/runtime/`
+- Unified build with [unjs/unbuild](https://github.com/unjs/unbuild)
+- Compatible with Nuxt 3 and Nuxt Kit
+- Automated build config using last module spec
+- Typescript and ESM support
+- Auto generated CommonJS stubs
+- Auto generated types and shims for `@nuxt/schema`
 
-## Development
 
-- Clone this repository
-- Try changes using `yarn play` (it will build `playground/` to `playground/dist/`)
+## Project structure
+
+Using module builder, requires a special project setup. You can check a full example [here](./example).
+
+### `src/module.ts`
+
+This is the entrypoint for module definition.
+
+A default export using `defineNuxtModule` and `ModuleOptions` type export is expected.
+
+You could also optionally export `ModuleHooks` to annotate any custom hooks module uses.
+
+```js [src/module.ts]
+import { defineNuxtModule } from '@nuxt/kit'
+
+export interface ModuleOptions {
+  apiKey: string
+}
+
+export interface ModuleHooks {
+  'my-module:init': any
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'my-module',
+    configKey: 'myModule'
+  },
+  defaults: {
+    apiKey: 'test'
+  },
+  async setup (moduleOptions, nuxt) {
+    // Write module logic in setup function
+  }
+})
+```
+
+### `src/runtime/`
+
+Any runtime file and code that we need to provide by module including plugins, composables and server api, should be in this directory.
+
+Each file will be transformed individually using [unjs/mkdist](https://github.com/unjs/mkdist) to `dist/runtime/`.
+
+<!-- TODO: Docs about how to address runtime from within setup -->
+
+### `package.json`:
+
+A minimum `package.json` should look like this:
+
+```json [package.json]
+{
+  "name": "my-module",
+  "license": "MIT",
+  "version": "1.0.0",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build"
+  },
+  "dependencies": {
+    "@nuxt/kit": "npm:@nuxt/kit-edge@latest"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "latest"
+  }
+}
+```
+
+## Dist files
+
+Module builder generates dist files in `dist/` directory:
+
+- `module.mjs`: Module entrypoint build from `src/module`
+- `module.json`: Module meta extracted from `module.mjs` + `package.json`
+- `module.cjs`: ESM proxy to allow require module in CommonJS context
+- `types.d.ts`: Exported types in addition to shims for `nuxt.config` auto completion.
+- `runtime/*`: Individually transformed files using [unjs/mkdist](https://github.com/unjs/mkdist)
+  - Javascript and `.ts` files will be transformed to `.mjs` with extracted types on `.d.ts` file with same name
+  - `.vue` files will be transformed with extracted `.d.ts` file
+  - Other files will be copied as as
+
+
+
+## 💻 Development
+
+- Clone repository
+- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10)
+- Install dependencies using `yarn install`
+- Try building [example module](./example) using `yarn example:build`
 
 ## License
 

package/dist/chunks/build.mjs

@@ -1,10 +1,14 @@
-import { promises } from 'fs';
+import { promises, existsSync } from 'fs';
+import { pathToFileURL } from 'url';
 import { resolve } from 'pathe';
+import consola from 'consola';
+import { findExports } from 'mlly';
 
-async function buildModule(rootDir) {
+async function buildModule(opts) {
   const { build } = await import('unbuild');
-  await build(rootDir, false, {
+  await build(opts.rootDir, false, {
     declaration: true,
+    stub: opts.stub,
     entries: [
       "src/module",
       { input: "src/runtime/", outDir: "dist/runtime", ext: "mjs" }
@@ -20,19 +24,77 @@ async function buildModule(rootDir) {
       "@nuxt/kit-edge"
     ],
     hooks: {
-      async "build:done"(ctx) {
+      async "rollup:done"(ctx) {
         await writeCJSStub(ctx.options.outDir);
+        const moduleEntryPath = resolve(ctx.options.outDir, "module.mjs");
+        const moduleFn = await import(pathToFileURL(moduleEntryPath).toString()).then((r) => r.default || r).catch((err) => {
+          consola.error(err);
+          consola.error("Cannot load module. Please check dist:", moduleEntryPath);
+          return null;
+        });
+        if (!moduleFn) {
+          return;
+        }
+        const moduleMeta = await moduleFn.getMeta();
+        if (ctx.pkg) {
+          if (!moduleMeta.name) {
+            moduleMeta.name = ctx.pkg.name;
+          }
+          if (!moduleMeta.version) {
+            moduleMeta.version = ctx.pkg.version;
+          }
+        }
+        const metaFile = resolve(ctx.options.outDir, "module.json");
+        await promises.writeFile(metaFile, JSON.stringify(moduleMeta, null, 2), "utf8");
+        await writeTypes(ctx.options.outDir, moduleMeta);
       }
     }
   });
 }
+async function writeTypes(distDir, meta) {
+  const dtsFile = resolve(distDir, "types.d.ts");
+  if (existsSync(dtsFile)) {
+    return;
+  }
+  const moduleTypesFile = resolve(distDir, "module.d.ts");
+  const moduleTypes = await promises.readFile(moduleTypesFile, "utf8").catch(() => "");
+  const typeExports = findExports(moduleTypes);
+  const isStub = moduleTypes.includes("export *");
+  const hasModuleOptions = isStub || typeExports.find((exp) => exp.names.includes("ModuleOptions"));
+  const hasModuleHooks = isStub || typeExports.find((exp) => exp.names.includes("ModuleHooks"));
+  const schemaShims = [];
+  const moduleImports = [];
+  if (meta.configKey && hasModuleOptions) {
+    moduleImports.push("ModuleOptions");
+    schemaShims.push(`  interface NuxtConfig { ['${meta.configKey}']?: Partial<ModuleOptions> }`);
+    schemaShims.push(`  interface NuxtOptions { ['${meta.configKey}']?: ModuleOptions }`);
+  }
+  if (hasModuleHooks) {
+    moduleImports.push("ModuleHooks");
+    schemaShims.push("  interface NuxtHooks extends ModuleHooks {}");
+  }
+  const dtsContents = `
+import { ${moduleImports.join(", ")} } from './module'
+
+${schemaShims.length ? `declare module '@nuxt/schema' {
+${schemaShims.join("\n")}
+}
+` : ""}
+
+export * from './module'
+`;
+  await promises.writeFile(dtsFile, dtsContents, "utf8");
+}
 async function writeCJSStub(distDir) {
   const cjsStubFile = resolve(distDir, "module.cjs");
-  const cjsStub = `// CommonJS proxy to use native ESM
-module.exports = function(...args) {
+  if (existsSync(cjsStubFile)) {
+    return;
+  }
+  const cjsStub = `module.exports = function(...args) {
   return import('./module.mjs').then(m => m.default.call(this, ...args))
 }
-module.exports.meta = require('../package.json')
+const _meta = module.exports.meta = require('./meta.json')
+module.exports.getMeta = () => Promise.resolve(_meta)
 `;
   await promises.writeFile(cjsStubFile, cjsStub, "utf8");
 }

package/dist/cli.mjs

@@ -1,13 +1,19 @@
-#!/bin/env node
+#!/usr/bin/env node
 import mri from 'mri';
 import { resolve } from 'pathe';
 import { b as buildModule } from './chunks/build.mjs';
 import 'fs';
+import 'url';
+import 'consola';
+import 'mlly';
 
 async function main() {
   const args = mri(process.argv.slice(2));
   const rootDir = resolve(args._[0] || ".");
-  await buildModule(rootDir);
+  await buildModule({
+    rootDir,
+    stub: args.stub
+  });
 }
 main().catch((err) => {
   console.error(err);

package/dist/index.d.ts

@@ -1,3 +1,7 @@
-declare function buildModule(rootDir: string): Promise<void>;
+interface BuildModuleOptions {
+    rootDir: string;
+    stub?: boolean;
+}
+declare function buildModule(opts: BuildModuleOptions): Promise<void>;
 
-export { buildModule };
+export { BuildModuleOptions, buildModule };

package/dist/index.mjs

@@ -1,3 +1,6 @@
 export { b as buildModule } from './chunks/build.mjs';
 import 'fs';
+import 'url';
 import 'pathe';
+import 'consola';
+import 'mlly';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@nuxt/module-builder",
-  "version": "0.0.0",
+  "version": "0.1.4",
+  "description": "Complete solution to build Nuxt Modules",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -10,28 +11,35 @@
   },
   "types": "./dist/index.d.ts",
   "bin": {
-    "nuxt-build-module": "./dist/cli.mjs"
+    "nuxt-build-module": "./dist/cli.mjs",
+    "nuxt-module-build": "./dist/cli.mjs"
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "unbuild",
-    "cli": "jiti ./src/cli.ts",
+    "example:build": "yarn nuxt-module-build ./example",
     "lint": "eslint --ext .ts,.js,.mjs .",
+    "nuxt-module-build": "jiti ./src/cli.ts",
     "prepack": "yarn build",
-    "play": "yarn cli ./playground",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
     "test": "yarn lint"
   },
   "dependencies": {
+    "consola": "^2.15.3",
+    "mlly": "^0.3.19",
     "mri": "^1.2.0",
     "pathe": "^0.2.0",
-    "unbuild": "^0.6.2"
+    "unbuild": "^0.6.7"
   },
   "devDependencies": {
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@nuxtjs/eslint-config-typescript": "^8.0.0",
-    "@types/mri": "^1.1.1",
-    "eslint": "^8.3.0",
+    "@nuxt/schema": "npm:@nuxt/schema-edge@latest",
+    "@nuxtjs/eslint-config-typescript": "latest",
+    "@types/mri": "latest",
+    "eslint": "latest",
     "jiti": "^1.12.9",
-    "standard-version": "^9.3.2"
+    "standard-version": "latest"
   }
 }

package/.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-charset = utf-8
-
-[*.js]
-indent_style = space
-indent_size = 2
-
-[{package.json,*.yml,*.cjson}]
-indent_style = space
-indent_size = 2

package/.eslintignore

@@ -1,3 +0,0 @@
-dist
-.nuxt
-.output

package/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "@nuxtjs/eslint-config-typescript"
-  ]
-}

package/.github/workflows/ci.yml

@@ -1,23 +0,0 @@
-name: ci
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 16
-          cache: 'yarn'
-      - run: yarn install
-      - run: yarn lint
-      - run: yarn build
-      - run: yarn play

package/build.config.ts

@@ -1,12 +0,0 @@
-import { defineBuildConfig } from 'unbuild'
-
-export default defineBuildConfig({
-  declaration: true,
-  rollup: {
-    emitCJS: false
-  },
-  entries: [
-    './src/cli',
-    './src/index'
-  ]
-})

package/playground/package.json

@@ -1,17 +0,0 @@
-{
-  "private": true,
-  "name": "mymodule",
-  "main": "./dist/module.cjs",
-  "types": "./dist/module.d.ts",
-  "build": {
-    "entries": [
-      "./src/custom"
-    ]
-  },
-  "exports": {
-    ".": {
-      "require": "./dist/module.cjs",
-      "import": "./dist/module.mjs"
-    }
-  }
-}

package/playground/src/custom.ts

@@ -1 +0,0 @@
-// Custom entry

package/playground/src/module.ts

@@ -1,5 +0,0 @@
-import { defineNuxtModule } from '@nuxt/kit'
-
-export default defineNuxtModule({
-  setup () {}
-})

package/playground/src/runtime/plugin.ts

@@ -1,4 +0,0 @@
-// @ts-ignore
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin((_nuxtApp) => {})

package/renovate.json

@@ -1,11 +0,0 @@
-{
-  "extends": [
-    "@nuxtjs"
-  ],
-  "baseBranches": [
-    "main"
-  ],
-  "lockFileMaintenance": {
-    "enabled": true
-  }
-}

package/src/build.ts

@@ -1,40 +0,0 @@
-import { promises as fsp } from 'fs'
-import { resolve } from 'pathe'
-
-export async function buildModule (rootDir: string) {
-  const { build } = await import('unbuild')
-
-  await build(rootDir, false, {
-    declaration: true,
-    entries: [
-      'src/module',
-      { input: 'src/runtime/', outDir: 'dist/runtime', ext: 'mjs' }
-    ],
-    rollup: {
-      emitCJS: false,
-      cjsBridge: true
-    },
-    externals: [
-      '@nuxt/schema',
-      '@nuxt/schema-edge',
-      '@nuxt/kit',
-      '@nuxt/kit-edge'
-    ],
-    hooks: {
-      async 'build:done' (ctx) {
-        await writeCJSStub(ctx.options.outDir)
-      }
-    }
-  })
-}
-
-async function writeCJSStub (distDir: string) {
-  const cjsStubFile = resolve(distDir, 'module.cjs')
-  const cjsStub = `// CommonJS proxy to use native ESM
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-module.exports.meta = require('../package.json')
-`
-  await fsp.writeFile(cjsStubFile, cjsStub, 'utf8')
-}

package/src/cli.ts

@@ -1,17 +0,0 @@
-#!/bin/env node
-
-/* eslint-disable no-console */
-import mri from 'mri'
-import { resolve } from 'pathe'
-import { buildModule } from './build'
-
-async function main () {
-  const args = mri(process.argv.slice(2))
-  const rootDir = resolve(args._[0] || '.')
-  await buildModule(rootDir)
-}
-
-main().catch((err) => {
-  console.error(err)
-  process.exit(1)
-})

package/src/index.ts

@@ -1 +0,0 @@
-export * from './build'

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "esModuleInterop": true,
-    "declaration": true,
-    "types": [
-      "node"
-    ]
-  },
-  "include": [
-    "src"
-  ]
-}