feat: add esbuild template

ircam-ismm · Jun 12, 2024 · 3418974 · 3418974
1 parent a13a883
commit 3418974
Show file tree

Hide file tree

Showing 19 changed files with 173 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 .Thumb.db
 
 node_modules
+templates/esbuild/build
diff --git a/README.md b/README.md
@@ -10,6 +10,10 @@ Interactive command line tools for scaffolding simple Web Audio test apps and de
 npx @ircam/create@latest [dirname]
 ```
 
+## TODOS
+
+- [ ] add `--template=nobuild` option on command line to simplify tutorial updates
+
 ## Credits
 
 [https://soundworks.dev/credits.html](https://soundworks.dev/credits.html)

diff --git a/create.js b/create.js
@@ -1,11 +1,10 @@
 #!/usr/bin/env node
-
-import { execSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 import * as url from 'node:url';
 
 import chalk from 'chalk';
+import { program } from 'commander';
 import { mkdirp } from 'mkdirp';
 import prompts from 'prompts';
 import readdir from 'recursive-readdir';
@@ -24,9 +23,24 @@ export function toValidPackageName(name) {
 
 console.log(`${chalk.gray(`[@ircam/create#v${version}]`)}`);
 
+const templates = ['nobuild', 'esbuild'];
+
+program
+  .argument('[path]', 'Directory in which we should create the project')
+  .option('-t, --template <string>', 'Template to use');
+
+program.parse();
+
+let { template } = program.opts();
+
+if (template && !templates.includes(template)) {
+  console.log(chalk.red(`> Invalid template "${template}", valid templates are: "${templates.join('", "')}", aborting...`));
+  process.exit(1);
+}
+
 let targetDir;
-if (process.argv[2]) {
-  targetDir = process.argv[2];
+if (program.processedArgs[0]) {
+  targetDir = program.processedArgs[0];
 } else {
   targetDir = '.';
 }
@@ -53,16 +67,32 @@ if (fs.existsSync(targetWorkingDir) && fs.readdirSync(targetWorkingDir).length >
   process.exit(1);
 }
 
-const templateDir = path.join(__dirname, 'templates', 'simple-online');
+if (!template) {
+  const result = await prompts([
+    {
+      type: 'select',
+      name: 'template',
+      message: 'Pick a template',
+      choices: templates.map(value => {
+        return { value };
+      }),
+    }
+  ]);
+
+  template = result.template;
+}
+
+const templateDir = path.join(__dirname, 'templates', template);
 
 const ignoreFiles = ['.DS_Store', 'Thumbs.db'];
 const files = await readdir(templateDir, ignoreFiles);
 
 await mkdirp(targetWorkingDir);
 
-
 console.log('');
 console.log(`> scaffolding app in:`, targetWorkingDir);
+console.log(`> template:`, template);
+console.log('');
 
 for (let src of files) {
   const file = path.relative(templateDir, src);
@@ -73,14 +103,15 @@ for (let src of files) {
   switch (file) {
     case 'package.json': {
       const pkg = JSON.parse(fs.readFileSync(src));
-      pkg.name = toValidPackageName(options.name);
+      pkg.name = toValidPackageName(targetDir);
 
       fs.writeFileSync(dest, JSON.stringify(pkg, null, 2));
       break;
     }
     case 'README.md':
     case 'index.html':
-    case 'main.js': {
+    case 'main.js':
+    case 'src/index.js': {
       let content = fs.readFileSync(src).toString();
       content = content.replace(/\[app_name\]/mg, targetDir);
       fs.writeFileSync(dest, content);
@@ -95,17 +126,23 @@ for (let src of files) {
 }
 
 console.log(chalk.yellow('> your project is ready!'));
-
 console.log('')
 console.log(chalk.yellow('> next steps:'));
+
 let i = 1;
 
 const relative = path.relative(process.cwd(), targetWorkingDir);
 if (relative !== '') {
   console.log(`  ${i++}: ${chalk.cyan(`cd ${relative}`)}`);
 }
 
-console.log(`  ${i++}: ${chalk.cyan('npx serve')}`);
+if (template === 'nobuild') {
+  console.log(`  ${i++}: ${chalk.cyan('npx serve')}`);
+  console.log('');
+} else if (template === 'esbuild') {
+  console.log(`  ${i++}: ${chalk.cyan('npm install')}`);
+  console.log(`  ${i++}: ${chalk.cyan('npm run dev')}`);
+  console.log('');
+}
 
-console.log('')
 console.log(`- to close the dev server, press ${chalk.bold(chalk.cyan('Ctrl-C'))}`);
diff --git a/templates/esbuild/.npmrc b/templates/esbuild/.npmrc
@@ -0,0 +1,2 @@
+package-lock=false
+
diff --git a/templates/simple-online/README.md → templates/esbuild/README.md b/templates/simple-online/README.md → templates/esbuild/README.md
diff --git a/templates/simple-online/assets/sample.wav → templates/esbuild/assets/sample.wav b/templates/simple-online/assets/sample.wav → templates/esbuild/assets/sample.wav
diff --git a/templates/esbuild/index.html b/templates/esbuild/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>[app_name]</title>
+  <script type="module" defer src="./build/index.js"></script>
+  <link rel="stylesheet" type="text/css" href="./styles.css" />
+</head>
+<body>
+
+</body>
+</html>
diff --git a/...es/simple-online/lib/load-audio-buffer.js → templates/esbuild/lib/load-audio-buffer.js b/...es/simple-online/lib/load-audio-buffer.js → templates/esbuild/lib/load-audio-buffer.js
diff --git a/...simple-online/lib/resume-audio-context.js → ...lates/esbuild/lib/resume-audio-context.js b/...simple-online/lib/resume-audio-context.js → ...lates/esbuild/lib/resume-audio-context.js
diff --git a/templates/esbuild/package.json b/templates/esbuild/package.json
@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "dev": "concurrently \"esbuild src/index.js --bundle --format=esm --watch --outdir=build\" \"serve\""
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.21.5",
+    "serve": "^14.2.3"
+  },
+  "dependencies": {
+    "@ircam/sc-components": "^3.0.0-alpha.61",
+    "lit": "^3.1.4"
+  }
+}
diff --git a/templates/esbuild/src/index.js b/templates/esbuild/src/index.js
@@ -0,0 +1,23 @@
+import { html, render } from 'lit';
+import '@ircam/sc-components';
+
+import resumeAudioContext from '../lib/resume-audio-context.js';
+import loadAudioBuffer from '../lib/load-audio-buffer.js';
+
+const audioContext = new AudioContext();
+await resumeAudioContext(audioContext);
+
+const buffer = await loadAudioBuffer('./assets/sample.wav', audioContext.sampleRate);
+
+render(html`
+  <h1>[app_name]</h1>
+  <sc-bang
+    @input=${e => {
+      const src = audioContext.createBufferSource();
+      src.connect(audioContext.destination);
+      src.buffer = buffer;
+      src.start();
+    }}
+  ></sc-bang>
+`, document.body);
+
diff --git a/templates/simple-online/styles.css → templates/esbuild/styles.css b/templates/simple-online/styles.css → templates/esbuild/styles.css
diff --git a/templates/nobuild/README.md b/templates/nobuild/README.md
@@ -0,0 +1,10 @@
+# [app_name]
+
+Simple template for Web Audio demos and tests
+
+## Usage
+
+```
+cd path/to/dir
+npx serve
+```
diff --git a/templates/nobuild/assets/sample.wav b/templates/nobuild/assets/sample.wav
diff --git a/templates/simple-online/index.html → templates/nobuild/index.html b/templates/simple-online/index.html → templates/nobuild/index.html
diff --git a/templates/nobuild/lib/load-audio-buffer.js b/templates/nobuild/lib/load-audio-buffer.js
@@ -0,0 +1,16 @@
+const contexts = new Map();
+
+export default async function loadAudioBuffer(pathname, sampleRate = 48000) {
+  if (!contexts.has(sampleRate)) {
+    const context = new OfflineAudioContext(1, 1, sampleRate);
+    contexts.set(sampleRate, context);
+  }
+
+  const response = await fetch(pathname);
+  const arrayBuffer = await response.arrayBuffer();
+
+  const context = contexts.get(sampleRate);
+  const audioBuffer = await context.decodeAudioData(arrayBuffer);
+
+  return audioBuffer;
+}
diff --git a/templates/nobuild/lib/resume-audio-context.js b/templates/nobuild/lib/resume-audio-context.js
@@ -0,0 +1,15 @@
+import { html, render } from 'https://unpkg.com/lit-html';
+
+export default async function resumeAudioContext(audioContext) {
+  return new Promise(resolve => {
+    render(html`
+      <sc-button
+        style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; font-size: 14px;"
+        @release=${async () => {
+          await audioContext.resume();
+          resolve();
+        }}
+      >Resume context</sc-button>
+    `, document.body);
+  });
+}
diff --git a/templates/simple-online/main.js → templates/nobuild/main.js b/templates/simple-online/main.js → templates/nobuild/main.js
diff --git a/templates/nobuild/styles.css b/templates/nobuild/styles.css
@@ -0,0 +1,27 @@
+:root {
+  --background-color: #181817;
+  --font-color: #ffffff;
+  --font-family: Consolas, monaco, monospace;
+  --font-size: 62.5%; // such that 1rem == 10px
+}
+
+* {
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+html, body {
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--background-color);
+  color: var(--font-color);
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+body {
+  padding: 20px;
+  margin: 0;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		.Thumb.db

		node_modules
		templates/esbuild/build