fragment-tools 0.1.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "fragment-tools",
+  "version": "0.1.0",
+  "description": "A web development environment for creative coding",
+  "main": "index.js",
+  "bin": {
+    "fragment": "bin/index.js"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/raphaelameaume/fragment.git"
+  },
+  "author": "Raphaël Améaume",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/raphaelameaume/fragment/issues"
+  },
+  "homepage": "https://github.com/raphaelameaume/fragment#readme",
+  "dependencies": {
+    "@rollup/plugin-alias": "^3.1.5",
+    "@sveltejs/vite-plugin-svelte": "^1.0.2",
+    "body-parser": "^1.20.0",
+    "changedpi": "^1.0.4",
+    "chokidar": "^3.5.2",
+    "convert-length": "^1.0.1",
+    "get-port": "^6.0.0",
+    "glslify": "^7.1.1",
+    "kleur": "^4.1.4",
+    "sade": "^1.7.4",
+    "svelte": "^3.49.0",
+    "svelte-json-tree": "^1.0.0",
+    "vite": "^3.0.9",
+    "webm-writer": "^1.0.0",
+    "ws": "^8.2.3"
+  }
+}

package/src/cli/db.js

@@ -0,0 +1,17 @@
+const state = {
+	'hello': 'world',
+};
+
+export function save(key, value) {
+	console.log("database :: save");
+	state[key] = value;
+};
+
+export function read() {
+	return state;
+}
+
+export default {
+	read,
+	save,
+};

package/src/cli/index.js

@@ -0,0 +1,198 @@
+import fs from "fs/promises";
+import path from "path";
+import log from "./log.js";
+import { start as startViteServer } from "./server.js";
+import { start as startWebSocketServer } from "./ws.js";
+import templates from "./templates/index.js";
+
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const timestamp = Date.now();
+
+export const run = async (entry, options) => {
+    let wsServer;
+
+    function exit() {
+        process.off('SIGTERM', exit);
+
+        if (wsServer) {
+            wsServer.close();
+        }
+    }
+
+    process.once('SIGTERM', exit);
+
+    try {
+        const entries = await createEntries(entry, options);
+
+        if (entries.length > 0) {
+            const filepaths = await generateFiles(entries, options);
+
+            if (!options.build) {
+                wsServer = await startWebSocketServer({
+                    cwd: process.cwd(),
+                });
+            }
+
+            await startViteServer({
+                options,
+                timestamp,
+                filepaths,
+                entries,
+                fragment: {
+                    server: wsServer,
+                }
+            });
+        }
+    } catch(error) {
+        console.log(error);
+    }
+};
+
+async function createEntries(entry, options) {
+    if (entry === undefined) {
+        log.error(`Missing argument.`)
+        console.log(" Use --new flag to let fragment create the file.");
+        return;
+    }
+    
+    const entries = [];
+    let shouldCreateFile = options.new;
+
+    async function createEntryFile(entryPath) {
+        if (path.extname(entryPath) !== ".js") {
+            throw new Error(`File extension needs to be .js`);
+        }
+
+        const createFromTemplate = typeof options.template === "string";
+        const templateFiles = createFromTemplate ? templates[options.template] : templates.default;
+
+        if (!templateFiles) {
+            throw new Error(`Error: Template ${options.template} doesn't exist.`);
+        }
+
+        const entryName = path.basename(entryPath, path.extname(entryPath));
+
+        for (let i = 0; i < templateFiles.length; i++) {
+            const filepath = path.join(__dirname, templateFiles[i]);
+            const ext = path.extname(filepath);
+            let fileContent = (await fs.readFile(filepath)).toString();
+
+            const destPath = i === 0 ? entryPath :
+                path.join(process.cwd(), `${entryName}${ext}`);
+            const destName = path.basename(destPath);
+
+            const filepaths = templateFiles
+                .filter((file, index) => index !== i)
+                .map((file) => path.basename(file));
+
+            for (let i = 0; i < filepaths.length; i++) {
+                fileContent = fileContent.replace(new RegExp(filepaths[i], 'g'), `${entryName}${path.extname(filepaths[i])}`);
+            }
+
+            try {
+                const stats = await fs.lstat(destPath);
+
+                if (stats.isFile()) {
+                    log.warning(`Ignored argument: --new. File already exists.`);
+                }
+            } catch(error) {
+                if (error.code === "ENOENT") {
+                    await fs.writeFile(destPath, Buffer.from(fileContent));
+                    console.log(`${log.prefix} Created ${path.relative(process.cwd(), destPath)} on disk.`);
+                } else {
+                    throw error;
+                }
+            }
+        }
+
+        shouldCreateFile = false;
+    }
+
+    const entryPath = path.join(process.cwd(), entry);
+
+    try {
+        if (shouldCreateFile) {
+            await createEntryFile(entryPath);
+        }
+
+        const stats = await fs.lstat(entryPath);
+        
+        if (stats.isFile()) {
+            entries.push(path.relative(process.cwd(), entryPath));
+        } else if (stats.isDirectory()) {
+            const files = await fs.readdir(entryPath);
+            const sketchFiles = files.filter((file) => path.extname(file) === ".js");
+
+            if (sketchFiles.length === 0) {
+                log.error(`Folder doesn't contain any sketch files.`);
+                console.log("Use --new flag to start working on a sketch.");
+                return;
+            }
+
+            entries.push(...sketchFiles.map((sketchFile) => path.relative(process.cwd(), sketchFile)));
+        }
+    } catch(error) {
+        if (error.code === "ENOENT") {
+            log.error(`Error: ${entry} doesn't exist.`);
+        } else {
+            log.error(error.message);
+        }
+    }
+
+    
+
+    return entries;
+}
+
+async function generateFiles(entries, options) {
+    log.warning(`Building files for:`);
+    entries.forEach(entry => console.log(`- ${entry}`));
+
+    const dir = "/node_modules/.fragment";
+    const dirpath = path.join(process.cwd(), dir);
+    const filename = `sketches.js`;
+
+    // create directory and don't throw error if it already exists
+    try {
+		await fs.mkdir(dirpath, { recursive: true });
+	} catch (e) {
+		if (e.code !== 'EEXIST') {
+            throw e;
+        }
+	}
+
+    // generate sketch index file
+    const code = `
+// This file is generated by Fragment. Do not edit it.
+
+export const sketches = {
+    ${entries.map((entry) => {
+        return `"${entry}": () => import("../../${entry}")`
+    }).join(',')
+    }
+};
+
+export const onSketchReload = (fn) => {
+    if (import.meta.hot) {
+        import.meta.hot.data.onSketchChange = fn;
+    }
+};
+
+if (import.meta.hot) {
+    import.meta.hot.accept((m) => {
+        if (typeof import.meta.hot.data.onSketchChange === "function") {
+            import.meta.hot.data.onSketchChange(m);
+        }
+    });
+}
+`;
+
+    const filepath = path.join(dirpath, filename);
+
+    await fs.writeFile(filepath, code);
+
+    return [filepath];
+}

package/src/cli/log.js

@@ -0,0 +1,26 @@
+import kleur from "kleur";
+
+const log = (() => {
+    let prefix = kleur.grey('[fragment]');
+
+    const success = (message) => {
+        console.log(prefix, kleur.green(`✔ ${message}`));
+    };
+
+    const warning = (message) => {
+        console.log(prefix, kleur.yellow(`ℹ ${message}`));
+    };
+
+    const error = (message) => {
+        console.log(prefix, kleur.red(`✖ ${message}`));
+    };
+
+    return {
+        prefix,
+        success,
+        warning,
+        error,
+    };
+})();
+
+export default log;

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

@@ -0,0 +1,77 @@
+import path from "path";
+import fs from "fs";
+import log from "../log.js";
+
+export default function checkDependencies({ cwd, app, entriesPaths, build } = {}) {
+    const regex = /\bexport[\s]*\b(let|const)[\s]*\brendering\b[\s]*=[\s]*["'](.*?)["']/;
+
+    const dependenciesMap = new Map();
+    dependenciesMap.set("three", ["three"]);
+    dependenciesMap.set("p5", ["p5"]);
+    dependenciesMap.set("fragment", []);
+    dependenciesMap.set("2d", []);
+
+	const renderers = new Map();
+	renderers.set("three", `${app}/renderers/THREERenderer.js`);
+	renderers.set("p5", `${app}/renderers/P5Renderer.js`);
+	renderers.set("ogl", `${app}/renderers/OGLRenderer.js`);
+	renderers.set("fragment", `${app}/renderers/FragmentRenderer.js`);
+	renderers.set("2d", `${app}/renderers/2DRenderer.js`);
+
+	const renderings = [];
+
+	entriesPaths.forEach((entry) => {
+		const content = fs.readFileSync(entry, { encoding: "utf-8" });
+        const match = content.match(regex);
+		const rendering = match && match[2];
+
+		if (rendering) {
+			renderings.push(rendering);
+
+			const dependencies = dependenciesMap.get(rendering);
+			dependencies.forEach((dependency) => {
+				const dependencyPath = path.join(cwd, `node_modules/${dependency}`);
+				const isInstalled = fs.existsSync(dependencyPath);
+
+				if (!isInstalled) {
+					const filename = entry.split(`${cwd}/`)[1];
+					const error = `Missing dependency "${dependency}" in ${filename}`;
+					log.error(error);
+					console.log(`
+It looks like you're trying to build a ${dependency} sketch (${filename}) without having ${dependency} installed.
+Run 'npm install ${dependency}' before starting Fragment to run ${filename}.
+					`)
+
+					throw new Error(error);
+				}
+			});
+		}
+	});
+
+	const skipFiles = [...renderers.keys()]
+		.map((key) => {
+			if (!renderings.includes(key)) {
+				return renderers.get(key);
+			} else {
+				return [];
+			}
+		})
+		.flat();
+
+    return {
+        name: 'check-dependencies',
+		config: () => ({
+			define: {
+				'__THREE_RENDERER__': build ? renderings.some((rendering) => rendering === "three") : true,
+				'__P5_RENDERER__': build ? renderings.some((rendering) => rendering === "p5") : true,
+				'__FRAGMENT_RENDERER__': build ? renderings.some((rendering) => rendering === "fragment") : true,
+				'__2D_RENDERER__': build ? renderings.some((rendering) => rendering === "2d") : true,
+			},
+		}),
+        load(id) {
+			if (build && skipFiles.includes(id)) {
+				return { code: "", map: null };
+			}
+        },
+    };
+}

package/src/cli/plugins/db.js

@@ -0,0 +1,12 @@
+import db from "../db.js"
+
+export default function dbPlugin() {
+	return {
+		name: 'db',
+		configureServer(server) {
+			server.middlewares.use('/db', (req, res, next) => {
+				res.end(JSON.stringify(db.read()))
+			})
+		}
+	};
+}

package/src/cli/plugins/hot-shader-reload.js

@@ -0,0 +1,86 @@
+import path from "path";
+import glslify from "glslify";
+
+export default function hotShaderReload({ wss }) {
+    const fileRegex = /\.(?:frag|vert|glsl|vs|fs)$/
+
+    function addShaderFilepath(shader, id) {
+        let keyword = `void main`;
+        let shaderParts = shader.split(keyword);
+        let hint = `// <filepath://${id}>`;
+
+        return `${shaderParts[0]}
+${hint}
+${keyword}${shaderParts[1]}
+        `;
+    }
+
+    let modulesToReload = [];
+
+    function compile(shader) {
+        return glslify(shader, {
+            basedir: process.cwd()
+        });
+    }
+    
+    return {
+        name: 'hot-shader-reload',
+        config: () => ({
+            optimizeDeps: {
+                esbuildOptions: {
+                    loader: {
+                        ".frag": "text",
+                        ".vert": "text",
+                        ".glsl": "text",
+                        ".fs": "text",
+                        ".vs": "text",
+                    }
+                },
+            }
+		}),
+        handleHotUpdate: async ({ modules, file, read }) => {
+            if (fileRegex.test(file)) {
+                let src = await read();
+                let source = compile(src);
+                source = addShaderFilepath(source, file);
+
+                wss.send({
+                    type: 'custom',
+                    event: 'shader-update',
+                    data: {
+                        filepath: file,
+                        source
+                    },
+                });
+
+                // save modules that were handled 
+                modulesToReload.push(...modules);
+
+                return [];
+            }
+            
+            // add previous modules that were handled to the list of modules to avoid shader invalidation
+            if (modulesToReload.length > 0) {
+                const all = [
+                    ...modules,
+                    ...modulesToReload,
+                ];
+
+                modulesToReload = [];
+
+                return all;
+            }
+        },
+        transform: (src, id) => {
+            if (fileRegex.test(id)) {
+                let source = compile(src);
+                source = addShaderFilepath(source, id);
+
+                return {
+                    code: `export default ${JSON.stringify(source)}`,
+                    map: null // provide source map if available
+                }
+            }
+        }
+    };
+}

package/src/cli/plugins/hot-sketch-reload.js

@@ -0,0 +1,39 @@
+import path from "path";
+import kleur from "kleur";
+import log from "../log.js";
+
+export default function hotSketchReload({ cwd }) {
+    return {
+        name: 'hot-sketch-reload',
+        handleHotUpdate: async ({ server, modules, file, read }) => {
+			if (file.includes(cwd)) {
+				const filepath = path.relative(cwd, file);
+                console.log(`${log.prefix} ${kleur.green(`hmr update`)} /${filepath}`);
+			
+				server.ws.send({
+					type: 'custom',
+					event: 'sketch-update',
+					data: {
+						file,
+						filepath,
+						cwd,
+					}
+				});
+
+			}
+
+			return modules;
+        },
+        // transform: (src, id) => {
+        //     if (fileRegex.test(id)) {
+        //         let source = glslify(src);
+        //         source = addShaderFilepath(source, id);
+
+        //         return {
+        //             code: `export default ${JSON.stringify(source)}`,
+        //             map: null // provide source map if available
+        //         }
+        //     }
+        // }
+    };
+}

package/src/cli/plugins/screenshot.js

@@ -0,0 +1,31 @@
+import path from "path";
+import fs from "fs";
+import bodyParser from "body-parser";
+
+export default function screenshot({ cwd }) {
+	return {
+		name: 'screenshot',
+		configureServer(server){
+			server.middlewares.use(bodyParser.json({ limit: '100mb'}))
+			server.middlewares.use('/save', (req, res, next) => {
+				if (req.method === "POST") {
+					const { filename, dataURL } = req.body;
+
+					const filepath = path.join(cwd, filename);
+					const buffer = Buffer.from(dataURL, 'base64');
+
+					fs.writeFile(filepath, buffer, (error) => {
+						let statusCode = error ? 500 : 200;
+						let body = error ? { error } : { filepath };
+
+						res.writeHead(statusCode, {'Content-Type': 'application/json'});
+						res.end(JSON.stringify(body));
+					});
+				} else {
+					next();
+				}
+			});
+		}
+	}
+
+}

package/src/cli/server.js

@@ -0,0 +1,140 @@
+import path from "path";
+import os from 'os';
+import fs from "fs/promises";
+import { fileURLToPath } from 'url';
+import { createServer, defineConfig, build } from "vite";
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import hotShaderReload from "./plugins/hot-shader-reload.js";
+import hotSketchReload from "./plugins/hot-sketch-reload.js";
+import dbPlugin from "./plugins/db.js";
+
+import log from "./log.js";
+import db from "./db.js";
+import screenshotPlugin from "./plugins/screenshot.js";
+import checkDependencies from "./plugins/check-dependencies.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export async function start({ options, filepaths, entries, fragment }) {
+    const root = path.join(__dirname, '/../client');
+    const cwd = process.cwd();
+    const app = path.join(root, 'app');
+
+    const entriesPaths = entries.map((entry ) => path.join(cwd, entry));
+
+    const config = defineConfig({
+        configFile: false,
+        root,
+        logLevel: options.development ? "info" : "silent",
+        resolve: {
+            alias: [
+                { find: '@fragment/sketches', replacement: filepaths[0] },
+                { 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') },
+            ]
+        },
+        plugins: [
+            svelte({
+                configFile: false,
+                onwarn: (warning, handler) => {
+                    if (options.development) {
+                        handler(warning);
+                    } else {
+                        return;
+                    }
+                }
+            }),
+            hotSketchReload({
+                cwd,
+            }),
+            hotShaderReload({ wss: fragment.server }),
+            {
+                name: 'configure-response-headers',
+                configureServer: (server) => {
+                    server.middlewares.use((_req, res, next) => {
+                        res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+                        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+                        next();
+                    });
+                }
+            },
+            dbPlugin(),
+            screenshotPlugin({ cwd }),
+            checkDependencies({
+                cwd,
+                app,
+                entriesPaths,
+                build: options.build,
+            })
+        ],
+        server: {
+            port: options.port,
+            host: true,
+            fs: {
+                strict: false,
+                allow: [".."],
+            },
+        },
+        define: {
+            '__CWD__': `${JSON.stringify(cwd)}`,
+            '__FRAGMENT_PORT__': fragment.server ? fragment.server.port : undefined,
+            '__START_TIME__': Date.now(),
+            '__SEED__': Date.now(),
+            '__PRODUCTION__': options.build,
+        },
+        optimizeDeps: {
+            exclude: [
+                "@fragment/sketches",
+                ...entriesPaths,
+            ]
+        }
+    });
+
+    if (options.build) {
+        if (entries.length > 1) {
+            log.error(`fragment can only build one sketch at a time.`);
+            return;
+        }
+
+        const outDir = options.outDir ? options.outDir : entries[0].split('.js')[0];
+
+        await build({
+            ...config,
+            logLevel: "info",
+            build: {
+                outDir: path.join(process.cwd(), outDir),
+                emptyOutDir: options.emptyOutDir,
+            },
+        });
+
+        log.success(`Built files for:`);
+        entries.forEach(entry => console.log(`- ${entry}`));
+    } else {
+        log.warning(`Starting server...`);
+        const server = await createServer(config);
+
+        server.middlewares.use('/db', (req, res, next) => {
+            next();
+        });
+
+        await server.listen();
+        log.success(`Server started at:`);
+
+        Object.values(os.networkInterfaces())
+            .flatMap((nInterface) => nInterface ?? [])
+            .filter((detail) => detail && detail.address && (detail.family === 'IPv4' || detail.family === 4 ))
+            .forEach((detail) => {
+                const type = detail.address.includes('127.0.0.1')
+                ? 'Local:   '
+                : 'Network: '
+                const host = detail.address.replace('127.0.0.1', 'localhost');
+                const url = `http://${host}:${server.config.server.port}`;
+                console.log(`   ${type} ${url}`);
+            })
+
+        return server;
+    }
+}

package/src/cli/templates/2d.js

@@ -0,0 +1,15 @@
+export let props = {};
+
+export let init = ({ context, width, height }) => {
+
+};
+
+export let update = ({ context, width, height, time, deltaTime }) => {
+	context.clearRect(0, 0, width, height);
+};
+
+export let resize = ({ width, height }) => {
+
+};
+
+export let rendering = "2d";

package/src/cli/templates/fragment.fs

@@ -0,0 +1,10 @@
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = vec4(1., 0., 0., 1.);
+}