fragment-tools 0.2.8 → 0.2.9

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+	"changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "raphaelameaume/fragment"}],
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "restricted",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

package/.prettierignore

@@ -1,4 +1,5 @@
 pnpm-lock.yaml
 pnpm-workspace.yaml
 package-lock.json
+.changeset/config.json
 /docs

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# fragment-tools
+
+## 0.2.9
+
+### Patch Changes
+
+- Prevent state mutations and warnings
+- Start templates on a green screen
+- Update examples
+- Prevent build layout re-render if layout is not persistent

package/README.md

@@ -14,6 +14,7 @@
 - Hot shader reloading & [glslify](https://github.com/glslify/glslify) support
 - Interactive sketches using _triggers_
 - Static build for production deployment
+- TypeScript support
 
 ## Installation
 
@@ -44,15 +45,18 @@ npx fragment sketch.js --new
 
 ## Usage
 
-```
-# create a new directory for your sketches
+```bash
+# Create a new directory for your sketches
 mkdir sketches
 
-# move into that folder
+# Move into that folder
 cd sketches
 
-# create a sketch from a template
-npx fragment-tools ./sketch.js --new --template=2d
+# Create a sketch from a template
+npx fragment ./sketch.js --new --template=2d
+
+# or with TypeScript
+npx fragment ./sketch.ts --new --template=2d --typescript
 ```
 
 Learn more about the available flag options in the [CLI docs](./docs/api/CLI.md).
@@ -97,14 +101,14 @@ Feel free to reach out on [Twitter](https://twitter.com/raphaelameaume) if you w
 
 ## Running it locally
 
-```
-# clone or fork the project
+```bash
+# Clone or fork the project
 git clone https://github.com/raphaelameaume/fragment.git
 
-# move to the root of the repository
+# Move to the root of the repository
 cd fragment
 
-# run the command line locally
+# Run the command line locally
 node ./bin/index.js examples/shape-2d.js --dev
 
 # or from your sketch folder
@@ -122,7 +126,7 @@ npm link
 
 You should be able the command as before, only this time it will point to the repository instead of the globally installed package.
 
-```
+```bash
 fragment sketch.js
 ```
 

package/bin/index.js

@@ -21,6 +21,7 @@ prog.command('run [entry]', '', { default: true })
 	.describe('Run a dev environment for fragment')
 	.option('-n, --new', 'Create a new sketch', false)
 	.option('-t, --template', 'Specify template to create the file from', '2d')
+	.option('--typescript', 'Specify TypeScript support', false)
 	.option('-p, --port', 'Port to bind', 3000)
 	.option('-dev, --development', 'Enable development mode', false)
 	.option('-b, --build', 'Build sketch for production', false)
@@ -34,6 +35,7 @@ prog.command('run [entry]', '', { default: true })
 		if (options.new) {
 			return create(entry, {
 				templateName: options.template,
+				typescript: options.typescript,
 			});
 		}
 
@@ -59,9 +61,11 @@ prog.command('run [entry]', '', { default: true })
 prog.command('create [entry]')
 	.describe('Create a new sketch')
 	.option('-t, --template', 'Specify template to create the file from', '2d')
+	.option('--typescript', 'Specify TypeScript support', false)
 	.action((entry = '', options) => {
 		create(entry, {
 			templateName: options.template,
+			typescript: options.typescript,
 		});
 	});
 

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
     "fragment": "bin/index.js"
   },
   "scripts": {
-    "format": "prettier . --write"
+    "format": "prettier . --write",
+    "changeset:add": "changeset add",
+    "changeset:version": "changeset version",
+    "changeset:publish": "changeset publish"
   },
   "type": "module",
   "repository": {
@@ -38,6 +41,10 @@
     "ws": "^8.2.3"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.29.6",
+    "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@types/p5": "^1.7.6",
+    "@types/three": "^0.174.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.6"
   }

package/src/cli/build.js

@@ -1,7 +1,6 @@
 import path from 'node:path';
 import { readdir } from 'node:fs/promises';
 import { mergeConfig, build as viteBuild } from 'vite';
-import { createFragmentFile } from './createFragmentFile.js';
 import { createConfig } from './createConfig.js';
 import { getEntries } from './getEntries.js';
 import { log, magenta } from './log.js';
@@ -17,6 +16,7 @@ import hotShaderReplacement from './plugins/hot-shader-replacement.js';
  * @param {string} options.outDir
  * @param {boolean} options.emptyOutDir
  * @param {boolean} options.development
+ * @param {string} options.configFilepath
  * @param {boolean} [options.prompts=true]
  */
 export async function build(entry, options) {
@@ -94,10 +94,8 @@ export async function build(entry, options) {
 				prefix,
 			);
 
-			const fragmentFilepath = await createFragmentFile(entries, cwd);
 			const config = await createConfig(
 				entries,
-				fragmentFilepath,
 				{
 					dev: options.development,
 					build: true,

package/src/cli/create.js

@@ -1,10 +1,12 @@
 import path from 'node:path';
 import fs from 'node:fs';
 import { readdir, readFile, writeFile } from 'node:fs/promises';
+import { createTsConfigFile } from './createFragmentFile.js';
 import { log, magenta, bold, cyan, dim } from './log.js';
 import * as p from './prompts.js';
 import {
 	packageManager,
+	__dirname,
 	file,
 	mkdirp,
 	handleCancelledPrompt,
@@ -17,8 +19,9 @@ import {
  * @param {string} entry
  * @param {object} options
  * @param {string} options.templateName
+ * @param {boolean} options.typescript
  */
-export async function create(entry, { templateName } = {}) {
+export async function create(entry, { templateName, typescript } = {}) {
 	const cwd = process.cwd();
 	const prefix = log.prefix('create');
 
@@ -64,7 +67,8 @@ export async function create(entry, { templateName } = {}) {
 		let templatesOptions = fs
 			.readdirSync(file('./templates'))
 			.map((dir) => {
-				const metadata = file(`./templates/${dir}/meta.json`);
+				const dirpath = file(`./templates/${dir}`);
+				const metadata = path.join(dirpath, 'meta.json');
 				const template = JSON.parse(fs.readFileSync(metadata, 'utf8'));
 
 				return {
@@ -92,6 +96,15 @@ export async function create(entry, { templateName } = {}) {
 
 		handleCancelledPrompt(templateName, prefix);
 
+		typescript = await p.confirm({
+			message: 'Use TypeScript template?',
+			active: 'Yes',
+			inactive: 'No',
+			initialValue: typescript,
+		});
+
+		handleCancelledPrompt(typescript, prefix);
+
 		let template = templatesOptions.find(
 			(option) => option.value === templateName,
 		);
@@ -114,8 +127,12 @@ export async function create(entry, { templateName } = {}) {
 		const from = file(`./templates/${template.path}`);
 		const to = dir;
 
+		const tsOptions = templatesOptions.typescript ?? {};
+		const tsExcludes = tsOptions.excludes ?? ['index.js'];
+		const jsExcludes = tsOptions.includes ?? ['index.ts'];
+		let excludes = [...(typescript ? tsExcludes : jsExcludes), 'meta.json'];
+
 		let filename = path.basename(name).split('.')[0];
-		let excludes = ['meta.json'];
 		let templateFiles = await readdir(from);
 
 		templateFiles = templateFiles.filter(
@@ -128,14 +145,14 @@ export async function create(entry, { templateName } = {}) {
 			prefix,
 		);
 
-		const checkForFileExistence = async (filepath) => {
+		const checkForFileExistence = async (filepath, skip = false) => {
 			if (fs.existsSync(filepath)) {
 				const dirname = path.dirname(filepath);
 				const ext = path.extname(filepath);
 
 				let filename = path.basename(filepath);
 
-				log.warn(`${filename} already exists in ${dirname}.\n`);
+				log.warn(`${filename} already exists.\n`);
 
 				let override = await p.confirm({
 					message: `Override ${filename}?`,
@@ -147,6 +164,8 @@ export async function create(entry, { templateName } = {}) {
 				handleCancelledPrompt(override, prefix);
 
 				if (!override) {
+					if (skip) return '';
+
 					filename = await p.text({
 						message: 'Pick a different name:',
 						placeholder: `  `,
@@ -214,6 +233,33 @@ export async function create(entry, { templateName } = {}) {
 			newFiles.push(dest);
 		}
 
+		if (typescript) {
+			let dest = path.join(cwd, `tsconfig.json`);
+
+			log.info(`Creating tsconfig.json in ${dest}...`);
+
+			dest = await checkForFileExistence(dest, true);
+
+			if (dest) {
+				const fragmentTsConfigPath = await createTsConfigFile(cwd);
+
+				const tsConfigCode = `
+// Generated by Fragment.
+{
+  // https://github.com/raphaelameaume/fragment
+  "extends": "./${path.relative(path.dirname(dest), fragmentTsConfigPath)}",
+  "compilerOptions": {
+    "types": ["${path.relative(path.dirname(dest), path.join(__dirname, 'src/types/client.d.ts'))}"]
+  }
+}
+`;
+
+				await writeFile(dest, tsConfigCode);
+
+				log.success(`Created tsconfig.json in ${dest}\n`);
+			}
+		}
+
 		log.success(
 			`Done in ${prettifyTime(Date.now() - startTime)}\n`,
 			prefix,
@@ -228,7 +274,10 @@ export async function create(entry, { templateName } = {}) {
 			nextSteps += `${dim(`${i++}. Install dependencies`)}\n${bold(cyan(`${packageManager} install ${template.dependencies.join(' ')}`))}\n\n`;
 		}
 
-		nextSteps += `${dim(`${i++}. Start Fragment`)}\n${bold(cyan(`fragment ${path.relative(cwd, newFiles[newFiles.length - 1])}`))}`;
+		const regex = new RegExp(`${filename}\.(js|ts)$`);
+		const newIndexFile = newFiles.findLast((file) => regex.test(file));
+
+		nextSteps += `${dim(`${i++}. Start Fragment`)}\n${bold(cyan(`fragment ${path.relative(cwd, newIndexFile ?? entry)}`))}`;
 
 		p.note(nextSteps, 'Next steps');
 	} catch (error) {

package/src/cli/createConfig.js

@@ -4,7 +4,7 @@ import { defineConfig, loadConfigFromFile, mergeConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 import checkDependencies from './plugins/check-dependencies.js';
-import { file } from './utils.js';
+import { __dirname, file } from './utils.js';
 import { log } from './log.js';
 import sketches from './plugins/sketches.js';
 
@@ -43,7 +43,6 @@ export async function loadConfig({ cwd, filepath }) {
 /**
  * Create Vite config from entries
  * @param {string[]} entries
- * @param {string} fragmentFilepath
  * @param {options} options
  * @param {boolean} [options.dev=false]
  * @param {boolean} [options.build=false]
@@ -52,7 +51,6 @@ export async function loadConfig({ cwd, filepath }) {
  */
 export async function createConfig(
 	entries,
-	fragmentFilepath,
 	{ dev = false, build = false } = {},
 	configFilepath,
 	cwd = process.cwd(),
@@ -76,25 +74,13 @@ export async function createConfig(
 			logLevel: dev ? 'info' : 'silent',
 			publicDir,
 			resolve: {
-				alias: [
-					{
-						find: '@fragment/sketches',
-						replacement: fragmentFilepath,
-					},
-					{ find: '@fragment', replacement: app },
-					{
-						find: 'three',
-						replacement: path.join(cwd, 'node_modules/three'),
-					},
-					{
-						find: 'p5',
-						replacement: path.join(cwd, 'node_modules/p5'),
-					},
-					{
-						find: 'ogl',
-						replacement: path.join(cwd, 'node_modules/ogl'),
-					},
-				],
+				alias: {
+					'@fragment/types': path.join(__dirname, 'src/types'),
+					'@fragment': path.join(__dirname, 'src/client/app'),
+					three: path.join(cwd, 'node_modules/three'),
+					p5: path.join(cwd, 'node_modules/p5'),
+					ogl: path.join(cwd, 'node_modules/ogl'),
+				},
 			},
 			plugins: [
 				svelte({
@@ -125,7 +111,6 @@ export async function createConfig(
 			},
 			optimizeDeps: {
 				include: ['convert-length', 'webm-writer', 'changedpi'],
-				exclude: ['@fragment/sketches', ...entriesPaths],
 			},
 		}),
 		config.vite ?? {},

package/src/cli/createFragmentFile.js

@@ -1,67 +1,65 @@
 import path from 'node:path';
-import { writeFile } from 'node:fs/promises';
+import { readFile, writeFile } from 'node:fs/promises';
 import { log } from './log.js';
-import { mkdirp } from './utils.js';
+import { __dirname, file, mkdirp } from './utils.js';
+
+export const FRAGMENT_DIRECTORY = '/.fragment';
 
 /**
- * Create local files needed by Fragment
- * @param {string[]} entries
+ * Create local tsconfig.json file
  * @param {string} cwd Current working directory
  * @returns {string}
  */
-export async function createFragmentFile(entries = [], cwd = process.cwd()) {
+export async function createTsConfigFile(cwd = process.cwd()) {
 	try {
-		function getFilenameFromEntries(entries) {
-			if (entries.length === 1) {
-				const filename = path.parse(entries[0]).name;
-
-				return `${filename}.js`;
-			}
-
-			return `sketches.js`;
-		}
+		const dirpath = path.join(cwd, FRAGMENT_DIRECTORY);
+		const filepath = path.join(dirpath, 'tsconfig.json');
 
-		log.info(`Generating files...`);
+		const fragmentPath = path.relative(dirpath, __dirname);
 
-		const dir = '/node_modules/.fragment';
-		const dirpath = path.join(cwd, dir);
-		const filename = getFilenameFromEntries(entries);
-		const filepath = path.join(dirpath, filename);
-
-		// generate sketch index file
-		const code = /* js */ `
+		// Generate tsconfig.json file
+		const tsConfigCode = `
 // This file is generated by Fragment. Do not edit it.
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
 
-export const sketches = {
-    ${entries
-		.map((entry) => {
-			const entryPath = entry.split(path.sep).join(path.posix.sep);
-			const relativeEntryPath = `../../${entry}`
-				.split(path.sep)
-				.join(path.posix.sep);
-
-			return `"${entryPath}": () => import("${relativeEntryPath}")`;
-		})
-		.join(',')}
-};
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"esModuleInterop": false,
+		"moduleDetection": "force",
+		"resolveJsonModule": true,
+		"noEmit": true,
 
-export const onSketchReload = (fn) => {
-    if (import.meta.hot) {
-        import.meta.hot.data.onSketchChange = fn;
-    }
-};
+		/* Linting */
+		"strict": true,
+		"allowJs": true,
+		"checkJs": false,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true,
+		"allowSyntheticDefaultImports": true,
+		"forceConsistentCasingInFileNames": true,
 
-if (import.meta.hot) {
-    import.meta.hot.accept((m) => {
-        if (typeof import.meta.hot.data.onSketchChange === "function") {
-            import.meta.hot.data.onSketchChange(m);
-        }
-    });
+		/* Paths */
+		"paths": {
+			"@fragment/types": ["${path.join(fragmentPath, 'src/types')}"],
+			"@fragment/types/*": ["${path.join(fragmentPath, 'src/types')}/*"],
+			"@fragment/*": ["${path.join(fragmentPath, 'src/client/app')}/*"]
+		}
+	}
 }
 `;
 
 		await mkdirp(dirpath);
-		await writeFile(filepath, code);
+		await writeFile(filepath, tsConfigCode);
 
 		return filepath;
 	} catch (error) {

package/src/cli/getEntries.js

@@ -39,6 +39,8 @@ export async function getEntries(
 
 		const entryPath = path.join(cwd, entry);
 
+		const allowedExtensions = ['.js', '.ts'];
+
 		if (fs.existsSync(entryPath)) {
 			const stats = await lstat(entryPath);
 
@@ -47,7 +49,9 @@ export async function getEntries(
 			} else if (stats.isDirectory()) {
 				const files = await readdir(entryPath);
 				const sketchFiles = files
-					.filter((file) => path.extname(file) === '.js')
+					.filter((file) =>
+						allowedExtensions.includes(path.extname(file)),
+					)
 					.map((file) => path.join(entryPath, file));
 
 				if (sketchFiles.length > 0) {
@@ -63,10 +67,14 @@ export async function getEntries(
 		} else {
 			onError(`${path.join(cwd, entry)} does not exist.\n`);
 
-			const entryWithExt = addExtension(entry, '.js');
-			const fileExists = fs.existsSync(path.join(cwd, entryWithExt));
+			const entriesWithExt = allowedExtensions.map((ext) =>
+				addExtension(entry, ext),
+			);
+			const entryWithExt = entriesWithExt.find((entryWithExt) =>
+				fs.existsSync(path.join(cwd, entryWithExt)),
+			);
 
-			if (fileExists) {
+			if (typeof entryWithExt !== 'undefined') {
 				log.message(`Did you mean to type?\n`);
 
 				displayCommand(`fragment ${entryWithExt}`);
@@ -74,7 +82,7 @@ export async function getEntries(
 				log.message(
 					`Run the following command to start a new sketch:\n`,
 				);
-				displayCommand(`fragment ${entryWithExt} --new`);
+				displayCommand(`fragment ${entriesWithExt[0]} --new`);
 			}
 		}
 

package/src/cli/plugins/check-dependencies.js

@@ -20,7 +20,7 @@ export default function checkDependencies({
 	build,
 } = {}) {
 	const regex =
-		/\bexport[\s]*\b(let|const)[\s]*\brendering\b[\s]*=[\s]*["'](.*?)["']/;
+		/\bexport\s+\b(let|const)\s+\brendering\b\s*(?::\s*\w+)?\s*=\s*["'](.*?)["']/;
 
 	const dependenciesMap = new Map();
 	dependenciesMap.set('three', ['three']);

package/src/cli/run.js

@@ -1,6 +1,11 @@
+import path from 'node:path';
+import fs from 'node:fs';
 import { createServer, mergeConfig } from 'vite';
 import { createConfig } from './createConfig.js';
-import { createFragmentFile } from './createFragmentFile.js';
+import {
+	createTsConfigFile,
+	FRAGMENT_DIRECTORY,
+} from './createFragmentFile.js';
 import { getEntries } from './getEntries.js';
 import { log, magenta, bold, cyan, red } from './log.js';
 import save from './plugins/save.js';
@@ -17,6 +22,7 @@ import hotShaderReplacement from './plugins/hot-shader-replacement.js';
  * @param {boolean} options.development
  * @param {number} options.port
  * @param {number} options.exportDir
+ * @param {string} options.configFilepath
  */
 export async function run(entry, options = {}) {
 	let fragmentServer;
@@ -56,7 +62,11 @@ export async function run(entry, options = {}) {
 			);
 		}
 
-		const fragmentFilepath = await createFragmentFile(entries, cwd);
+		const tsConfigDirpath = path.join(cwd, FRAGMENT_DIRECTORY);
+		const tsConfigFilepath = path.join(tsConfigDirpath, 'tsconfig.json');
+		if (!fs.existsSync(tsConfigFilepath)) {
+			await createTsConfigFile(cwd);
+		}
 
 		fragmentServer = await startWebSocketServer({
 			cwd,
@@ -64,7 +74,6 @@ export async function run(entry, options = {}) {
 
 		const config = await createConfig(
 			entries,
-			fragmentFilepath,
 			{
 				dev: options.development,
 				build: false,

package/src/cli/templates/blank/index.js

@@ -1,4 +1,4 @@
-export let props = {};
+export const props = {};
 
 /**
  * @param {object} params
@@ -7,7 +7,7 @@ export let props = {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let init = ({ canvas, width, height, pixelRatio }) => {};
+export const init = ({ canvas, width, height, pixelRatio }) => {};
 
 /**
  * @param {object} params
@@ -21,7 +21,7 @@ export let init = ({ canvas, width, height, pixelRatio }) => {};
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ width, height, time, deltaTime }) => {};
+export const update = ({ width, height, time, deltaTime }) => {};
 
 /**
  * @param {object} params
@@ -30,7 +30,7 @@ export let update = ({ width, height, time, deltaTime }) => {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ canvas, width, height, pixelRatio }) => {
+export const resize = ({ canvas, width, height, pixelRatio }) => {
 	canvas.width = width * pixelRatio;
 	canvas.height = height * pixelRatio;
 	canvas.style.width = `${width}px`;

package/src/cli/templates/blank/index.ts

@@ -0,0 +1,15 @@
+import { Init, Resize, Update } from '@fragment/types';
+import { defineProps } from '@fragment/types/utils';
+
+export const props = defineProps({});
+
+export const init: Init<any> = ({}) => {};
+
+export const update: Update<any> = ({}) => {};
+
+export const resize: Resize<any> = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};