├── .babelrc
├── .nvmrc
├── example
├── src
│ ├── side.ts
│ ├── index.css
│ └── index.ts
├── build.sh
├── types.sh
├── serve.sh
├── web
│ ├── index.ts
│ └── index.html
├── typehead.config.cjs
├── tsconfig.types.json
└── tsconfig.json
├── assets
└── logo.png
├── .travis.yml
├── .eslintrc.json
├── src
├── util
│ ├── regex.mjs
│ ├── findEntryPoint.mjs
│ └── getEsbuildConfig.mjs
├── serve.mjs
└── build.mjs
├── CHANGELOG.md
├── index.mjs
├── LICENSE
├── package.json
├── .gitignore
└── README.md
/.babelrc:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v14.16.0
--------------------------------------------------------------------------------
/example/src/side.ts:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | width: 100%;
3 | }
4 |
--------------------------------------------------------------------------------
/example/build.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | node ../src/build.mjs
4 |
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapbox/typehead/HEAD/assets/logo.png
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | matrix:
3 | include:
4 | - script: npm run lint
5 |
--------------------------------------------------------------------------------
/example/types.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | ../node_modules/.bin/tsc -p tsconfig.types.json
--------------------------------------------------------------------------------
/example/serve.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | node ../src/serve.mjs --print-esbuild-config
4 |
--------------------------------------------------------------------------------
/example/web/index.ts:
--------------------------------------------------------------------------------
1 | import { hello } from '../src/index';
2 |
3 | document.querySelector('#hello').innerHTML = hello();
4 |
--------------------------------------------------------------------------------
/example/typehead.config.cjs:
--------------------------------------------------------------------------------
1 | console.log('hello!');
2 |
3 | module.exports = {
4 | loader: {
5 | '.css': 'text',
6 | },
7 | globalName: 'example'
8 | };
9 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["@mapbox/eslint-config-mapbox/base", "prettier"],
3 | "parser": "@babel/eslint-parser",
4 | "env": {
5 | "node": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/example/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/example/src/index.ts:
--------------------------------------------------------------------------------
1 | import { isString } from 'lodash';
2 |
3 | // @ts-expect-error - this is a string
4 | import css from './index.css';
5 |
6 | export { css };
7 |
8 | export function hello() {
9 | return isString('Hello world!');
10 | }
11 |
--------------------------------------------------------------------------------
/example/tsconfig.types.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "emitDeclarationOnly": true,
6 | "outDir": "./dist"
7 | },
8 | "include": ["src/*", "src/**/*"]
9 | }
10 |
--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "target": "ES2020",
5 | // This is needed since we use both 'esnext' and 'node' module resolution.
6 | // https://www.typescriptlang.org/docs/handbook/module-resolution.html#module-resolution-strategies
7 | "moduleResolution": "node",
8 | "lib": ["dom", "ES2020", "ESNext"],
9 | // Treat JSX as React.
10 | "jsx": "react",
11 | // Make sure CommonJS modules are read correctly.
12 | "esModuleInterop": true,
13 | // Significant perf increase by skipping checking .d.ts files.
14 | "skipLibCheck": true
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/util/regex.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * These are inverses of the same regex string from here:
3 | * https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
4 | *
5 | * This uses Node resolution behavior. Any file starting like ./, ../, or /
6 | * is local to the project. This means we should bundle it and run optimizations.
7 | *
8 | * Inversely, any import like 'this-import' is external and shouldn't be bundled.
9 | */
10 | export const IS_RELATIVE = /^[./]|^\.[./]|^\.\.[/]/;
11 | export const IS_EXTERNAL = /^[^./]|^\.[^./]|^\.\.[^/]/;
12 |
13 | /**
14 | * This is the same as IS_RELATIVE, but makes sure the file has the
15 | * extensions js/jsx/ts/tsx/cjs/mjs.
16 | */
17 | export const IS_RELATIVE_AND_JS =
18 | /(^[./]|^\.[./]|^\.\.[/]).*\.(mjs|cjs|jsx*|tsx*)$/;
19 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # v1.2.1
2 |
3 | - Allow for `"platform": "node"` to be specified and not overridden.
4 |
5 | # v1.2.0
6 |
7 | - If `globalName` is specified in `typehead.config.js`, then a fourth IIFE ("CDN") build will be created with that name.
8 |
9 | # v1.1.0
10 |
11 | - 🚨 [breaking change] Upgrade from ESBuild 0.12.0 to 0.14.0.
12 | - 🚨 [breaking change] Only run Lodash plugin on JavaScript files (expected but was bug).
13 |
14 | - Add `--print-esbuild-config` flag for debugging.
15 | - Remove outdated reference to `config.mjs`
16 |
17 | # v1.0.3
18 |
19 | - Drop fork of `esbuild-plugin-lodash` for published release.
20 |
21 | # v1.0.2
22 |
23 | - Add infrastructure linting and bump "engines" version in `package.json`.
24 |
25 | # v1.0.1
26 |
27 | - Make public on NPM. 🎉
28 |
29 | # v1.0.0
30 |
31 | - Initial release!
32 |
--------------------------------------------------------------------------------
/src/util/findEntryPoint.mjs:
--------------------------------------------------------------------------------
1 | import chalk from 'chalk';
2 | import { access } from 'fs/promises';
3 |
4 | /**
5 | * Find the entry point with a suitable extension.
6 | */
7 | export async function findEntryPoint(
8 | filename,
9 | extensions = ['.tsx', '.ts', '.jsx', '.js']
10 | ) {
11 | for (const ext of extensions) {
12 | try {
13 | // Will throw error if not found.
14 | await access(filename + ext);
15 | return filename + ext;
16 | // eslint-disable-next-line no-empty
17 | } catch {}
18 | }
19 |
20 | console.error(
21 | chalk.red(
22 | `Couldn't find ${filename}! Alternatively, specify 'entryPoints' in typehead.config.js / your Typehead configuration.\n\nReference: https://github.com/mapbox/typehead#customization\nESBuild Reference: https://esbuild.github.io/api/#entry-points`
23 | )
24 | );
25 | process.exit(1);
26 | }
27 |
--------------------------------------------------------------------------------
/index.mjs:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import chalk from 'chalk';
4 |
5 | import { spawn } from 'child_process';
6 |
7 | function showHelp() {
8 | console.warn(`Usage: typehead [subcommand]
9 |
10 | Refreshingly simple CLI for TypeScript packages.
11 |
12 | Options:
13 | -h, --help Display help for [subcommand]
14 | `);
15 | }
16 |
17 | if (process.argv.length < 3) {
18 | showHelp();
19 | process.exit(1);
20 | }
21 |
22 | const subcommand = process.argv[2];
23 | const child = spawn(`typehead-${subcommand}`, process.argv.slice(3));
24 |
25 | child.stdout.pipe(process.stdout);
26 | child.stderr.pipe(process.stderr);
27 |
28 | child.on('error', (e) => {
29 | if (e.message.includes('ENOENT')) {
30 | console.warn(
31 | chalk.yellow(`Couldn't find typehead-${subcommand} in your PATH. ⚠️\n`)
32 | );
33 | showHelp();
34 | process.exit(1);
35 | return;
36 | }
37 |
38 | console.error(e);
39 | });
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Mapbox
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/util/getEsbuildConfig.mjs:
--------------------------------------------------------------------------------
1 | import lodashPlugin from 'esbuild-plugin-lodash';
2 |
3 | import deepmerge from 'deepmerge';
4 | import { cosmiconfig } from 'cosmiconfig';
5 |
6 | import { IS_RELATIVE_AND_JS } from './regex.mjs';
7 |
8 | /**
9 | * Gets the base ESBuild config for build/serve.
10 | */
11 | export async function getEsbuildConfig() {
12 | const configFile = {};
13 |
14 | // Try loading the config file and assign any options it has.
15 | const explorer = cosmiconfig('typehead');
16 | try {
17 | const result = await explorer.search();
18 | Object.assign(configFile, result.config);
19 | } catch (e) {
20 | console.debug('Skipping typehead config, using defaults.');
21 | }
22 |
23 | const config = deepmerge(configFile, {
24 | sourcemap: true,
25 | bundle: true,
26 | plugins: [
27 | // Automatically rewrite Lodash statements.
28 | lodashPlugin({
29 | filter: IS_RELATIVE_AND_JS,
30 | }),
31 | ],
32 | });
33 |
34 | // Only set platform if not set by the configuration.
35 | if (!config.platform) {
36 | config.platform = 'neutral';
37 | }
38 |
39 | return config;
40 | }
41 |
--------------------------------------------------------------------------------
/src/serve.mjs:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import * as esbuild from 'esbuild';
4 |
5 | import { Command } from 'commander';
6 | import chalk from 'chalk';
7 |
8 | import deepmerge from 'deepmerge';
9 | import { resolve } from 'path';
10 |
11 | import { getEsbuildConfig } from './util/getEsbuildConfig.mjs';
12 | import { findEntryPoint } from './util/findEntryPoint.mjs';
13 |
14 | // Setup command line arguments.
15 | const program = new Command()
16 | .name('typehead-serve')
17 | .option('-h --host ', 'Host for server (localhost by default).')
18 | .option('-p --port ', 'Port for server (20009 by default).')
19 | .option('--print-esbuild-config', 'Prints the ESBuild config.')
20 | .parse(process.argv);
21 | const argv = program.opts();
22 |
23 | // Get base ESBuild config.
24 | const config = deepmerge(await getEsbuildConfig(), {
25 | entryNames: '[dir]/[name]-bundle',
26 | platform: 'browser',
27 | format: 'esm',
28 | });
29 |
30 | // Either use 'webEntryPoints' from config file or find in web/index.
31 | const cwd = process.cwd();
32 | config.entryPoints = config.webEntryPoints || [
33 | await findEntryPoint(resolve(cwd, 'web', 'index')),
34 | ];
35 | config.outdir = config.webOutdir || 'web';
36 |
37 | if (argv.printEsbuildConfig) {
38 | console.log(chalk.blue('ESBuild config:'));
39 | console.log(JSON.stringify(config, null, 2));
40 | }
41 |
42 | console.log(chalk.blue('Open your browser to build the file! 🏗️'));
43 |
44 | const server = await esbuild.serve(
45 | {
46 | servedir: 'web',
47 | host: argv.host || 'localhost',
48 | // "it will default to an open port with a preference for port 8000"
49 | // https://esbuild.github.io/api/#serve-arguments
50 | port: argv.port || undefined,
51 | },
52 | config
53 | );
54 |
55 | console.log(
56 | chalk.yellow(`\nServer available at http://${server.host}:${server.port}`)
57 | );
58 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mapbox/typehead",
3 | "version": "1.2.1",
4 | "description": "Refreshingly simple CLI for TypeScript packages.",
5 | "main": "index.mjs",
6 | "type": "module",
7 | "bin": {
8 | "typehead": "index.mjs",
9 | "typehead-build": "src/build.mjs",
10 | "typehead-serve": "src/serve.mjs"
11 | },
12 | "scripts": {
13 | "lint": "eslint src/**/*",
14 | "format": "prettier src/**/*",
15 | "git-pre-commit": "lint-staged"
16 | },
17 | "repository": {
18 | "type": "git",
19 | "url": "git+https://github.com/mapbox/typehead.git"
20 | },
21 | "author": "Michael Bullington ",
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/mapbox/typehead/issues"
25 | },
26 | "homepage": "https://github.com/mapbox/typehead#readme",
27 | "dependencies": {
28 | "chalk": "^4.1.2",
29 | "commander": "^8.1.0",
30 | "cosmiconfig": "^7.0.1",
31 | "deepmerge": "^4.2.2",
32 | "esbuild": "^0.14.19",
33 | "esbuild-plugin-lodash": "^1.1.0"
34 | },
35 | "lint-staged": {
36 | "*.{js,jsx,ts,tsx}": "eslint --fix",
37 | "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
38 | },
39 | "peerDependencies": {
40 | "typescript": "^4.3.5"
41 | },
42 | "devDependencies": {
43 | "@babel/core": "^7.15.5",
44 | "@babel/eslint-parser": "^7.15.4",
45 | "@mapbox/eslint-config-mapbox": "^3.0.0",
46 | "@types/lodash": "^4.14.178",
47 | "@vercel/git-hooks": "^1.0.0",
48 | "eslint": "^7.32.0",
49 | "eslint-config-prettier": "^8.3.0",
50 | "lint-staged": "^11.1.2",
51 | "lodash": "^4.17.21",
52 | "prettier": "^2.3.2",
53 | "typescript": "^4.6.3"
54 | },
55 | "engines": {
56 | "node": ">=14.17.6"
57 | },
58 | "prettier": {
59 | "printWidth": 80,
60 | "semi": true,
61 | "singleQuote": true,
62 | "trailingComma": "es5"
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 | !example/dist
85 |
86 | # Gatsby files
87 | .cache/
88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
89 | # https://nextjs.org/blog/next-9-1#public-directory-support
90 | # public
91 |
92 | # vuepress build output
93 | .vuepress/dist
94 |
95 | # Serverless directories
96 | .serverless/
97 |
98 | # FuseBox cache
99 | .fusebox/
100 |
101 | # DynamoDB Local files
102 | .dynamodb/
103 |
104 | # TernJS port file
105 | .tern-port
106 |
107 | example/dist
--------------------------------------------------------------------------------
/src/build.mjs:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import * as esbuild from 'esbuild';
4 |
5 | import { Command } from 'commander';
6 | import chalk from 'chalk';
7 |
8 | import deepmerge from 'deepmerge';
9 | import { resolve } from 'path';
10 |
11 | import { getEsbuildConfig } from './util/getEsbuildConfig.mjs';
12 | import { findEntryPoint } from './util/findEntryPoint.mjs';
13 | import { IS_EXTERNAL } from './util/regex.mjs';
14 |
15 | // Setup command line arguments.
16 | const program = new Command()
17 | .name('typehead-build')
18 | .option('-w --watch', 'Watch source files for changes.')
19 | .option('--print-esbuild-config', 'Prints the ESBuild config.')
20 | .parse(process.argv);
21 | const argv = program.opts();
22 |
23 | // Get base ESBuild config.
24 | const config = await getEsbuildConfig();
25 |
26 | // Make sure we're setting a default entry point and outdir.
27 | if (!config.entryPoints) {
28 | const cwd = process.cwd();
29 | config.entryPoints = [await findEntryPoint(resolve(cwd, 'src', 'index'))];
30 | }
31 | if (!config.outdir) {
32 | config.outdir = 'dist';
33 | }
34 |
35 | if (argv.printEsbuildConfig) {
36 | console.log(chalk.blue('ESBuild config:'));
37 | console.log(JSON.stringify(config, null, 2));
38 | }
39 |
40 | // Configure watch.
41 | if (argv.watch) {
42 | config.watch = {
43 | onRebuild(e) {
44 | if (e) {
45 | console.error(chalk.red('Rebuild failed. ⚔️'));
46 | console.error(e);
47 | return;
48 | }
49 |
50 | console.log(chalk.green(`Rebuild complete! 🎉`));
51 | },
52 | };
53 |
54 | console.log(chalk.blue('Watching filesystem for changes...'));
55 | }
56 |
57 | // Get the time so we can show how long it took to build.
58 | const now1 = Date.now();
59 | console.log(chalk.blue('Build starting! 🏗️'));
60 |
61 | // 'pkgConfig' includes make-all-packages-external, which for NPM
62 | // distribution is what we want.
63 | const pkgConfig = deepmerge(config, {
64 | plugins: [
65 | /**
66 | * Small ESBuild plugin not to bundle node_modules:
67 | * https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
68 | */
69 | {
70 | name: 'make-all-packages-external',
71 | setup(build) {
72 | build.onResolve({ filter: IS_EXTERNAL }, (args) => ({
73 | path: args.path,
74 | external: true,
75 | }));
76 | },
77 | },
78 | ],
79 | });
80 |
81 | try {
82 | await Promise.all([
83 | // Development build.
84 | esbuild.build({
85 | ...pkgConfig,
86 | entryNames: '[dir]/[name]-development',
87 | format: 'cjs',
88 | }),
89 | // Production build.
90 | esbuild.build({
91 | ...pkgConfig,
92 | entryNames: '[dir]/[name]',
93 | format: 'cjs',
94 | minify: true,
95 | }),
96 | // ESM build.
97 | esbuild.build({
98 | ...pkgConfig,
99 | entryNames: '[dir]/[name]-esm',
100 | format: 'esm',
101 | }),
102 | ]);
103 | } catch (e) {
104 | console.error(chalk.red('Build failed. ⚔️'));
105 | console.error(e);
106 | }
107 |
108 | // If we have a global name, create a build for CDN.
109 | if (config.globalName) {
110 | try {
111 | await Promise.all([
112 | // CDN build.
113 | esbuild.build({
114 | ...config,
115 | entryNames: `[dir]/${config.globalName}`,
116 | format: 'iife',
117 | minify: true,
118 | bundle: true,
119 | platform: 'browser'
120 | }),
121 | ]);
122 | } catch (e) {
123 | console.error(chalk.red('Build failed. ⚔️'));
124 | console.error(e);
125 | }
126 | }
127 |
128 | const now2 = Date.now();
129 | console.log(chalk.green(`Build complete in ${(now2 - now1) / 1000}s 🎉`));
130 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | Typehead is a thin wrapper around [ESBuild](https://esbuild.github.io/) that makes it refreshingly simple to develop NPM packages using TypeScript.
4 |
5 | 📦 `npm install --save-dev @mapbox/typehead typescript`
6 |
7 | # How?
8 |
9 | In your `package.json`:
10 |
11 | ```json
12 | {
13 | "main": "dist/index.js",
14 | "module": "dist/index-esm.js",
15 | "typings": "dist/index.d.ts",
16 | "scripts": {
17 | "build": "typehead build",
18 | "watch": "typehead build --watch",
19 | "serve": "typehead serve"
20 | }
21 | }
22 | ```
23 |
24 | Typehead will not check types or generate declaration files. While this seems initially counter-intuitive, this operation is costly and usually covered by IDE tools (VSCode) and CI (using `tsc`).
25 |
26 | We recommend setting this up with `tsc`, which is included with TypeScript.
27 |
28 | Here's an example that builds types before publishing to NPM:
29 |
30 | `tsconfig.types.json`:
31 |
32 | ```json
33 | {
34 | "extends": "./tsconfig.json",
35 | "compilerOptions": {
36 | "declaration": true,
37 | "emitDeclarationOnly": true,
38 | "outDir": "./dist"
39 | },
40 | "include": ["src/*", "src/**/*"]
41 | }
42 | ```
43 |
44 | `package.json`:
45 |
46 | ```json
47 | {
48 | "scripts": {
49 | "types": "tsc -p tsconfig.types.json",
50 | "prepare": "npm run types && npm run build"
51 | }
52 | }
53 | ```
54 |
55 | ## Build
56 |
57 | `typehead build` will automatically set the entry point to `src/index`. You can use either `.ts`, `.tsx`, `.jsx`, or `.js` files. We heavily recommend the use of TypeScript for all packages.
58 |
59 | Output files will live in `dist/`:
60 |
61 | This behavior is configurable ([see below](#Customization)).
62 |
63 | - A development CSM build `index-development.js` that is **not** minified.
64 | - A production CSM build `index.js` that is minified.
65 | - A production ESM build `index-esm.js` that is not minified.
66 |
67 | ### Global name
68 |
69 | If `globalName` is specified in [customization](#customization), then a fourth build will be created with that name.
70 |
71 | - A production IIFE build `{globalName}.js` that is minified and includes all dependencies statically.
72 |
73 | The IIFE build is suitable for distribution on CDNs and [UNPKG](https://unpkg.com/).
74 |
75 | `package.json`:
76 |
77 | ```
78 | {
79 | "unpkg": "dist/{globalName}.js"
80 | }
81 | ```
82 |
83 | ## Serve
84 |
85 | `typehead serve` will start a web server for the `web` directory (if present).
86 |
87 | Inside `web`, `web/index.{js,jsx,ts,tsx}` will be bundled by ESBuild for browser use. From this file, you can import your main module from `../src` and do things like demos, benchmarking, etc...
88 |
89 | The bundle will be accessible from the web server at `/index-bundle.js`. Make sure to use `type="module"` in your `
100 |
101 |