fragment-tools 0.1.13 → 0.1.15

package/src/client/public/css/global.css

@@ -12,25 +12,28 @@
 }
 
 :root {
-	--font-mono: "Jetbrains Mono", monospace;
+	--font-mono: 'Jetbrains Mono', monospace;
 
 	--color-lightred: #ffaeae;
 	--color-red: #ff4444;
 	--color-green: #9af49f;
-	--color-lightblack: #0E0E0E;
-	
+	--color-lightblack: #0e0e0e;
+
 	--color-background: #242425;
 	--color-active: #177bd0;
+	--color-active-disabled: #214366;
 	--color-text: #f0f0f0;
 	--color-border: var(--color-lightblack);
 	--color-border-input: #000000;
-    --color-background-input: #1d1d1e;
-    --color-spacing: #323233;
+	--color-text-input: #989899;
+	--color-text-input-disabled: #535354;
+	--color-background-input: #1d1d1e;
+	--color-spacing: #323233;
 
 	--height-input: 20px;
 	--height-topbar: 24px;
-    --border-radius-input: 3px;
-    --font-size-input: 11px;
+	--border-radius-input: 3px;
+	--font-size-input: 11px;
 }
 
 html {
@@ -63,7 +66,8 @@ body {
 	overflow: hidden;
 }
 
-ul, ol {
+ul,
+ol {
 	list-style: none;
 	margin: 0;
 	padding: 0;
@@ -75,7 +79,9 @@ ul, ol {
 	scrollbar-color: var(--color-active) transparent;
 }
 
-input, select, button {
+input,
+select,
+button {
 	-webkit-appearance: none;
 	padding: 0;
 	margin: 0;
@@ -83,19 +89,23 @@ input, select, button {
 	font-family: var(--font-mono);
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
 	font-weight: 400;
 	margin: 0;
 	padding: 0;
 }
 
 .visually-hidden {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+	position: absolute;
+	left: -10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
 }
 
 .loading {

package/src/cli/db.js

@@ -1,17 +0,0 @@
-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

@@ -1,198 +0,0 @@
-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/plugins/db.js

@@ -1,12 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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/screenshot.js

@@ -1,46 +0,0 @@
-import path from "path";
-import fs from "fs/promises";
-import fsSync from "fs";
-import bodyParser from "body-parser";
-import log from "../log.js";
-
-export default function screenshot({ cwd, exportDir = cwd }) {
-	let dir = (path.isAbsolute(exportDir) ? exportDir : path.join(cwd, exportDir));
-
-	return {
-		name: 'screenshot',
-		configureServer(server){
-			server.middlewares.use(bodyParser.json({ limit: '100mb'}))
-			server.middlewares.use('/save', async (req, res, next) => {
-				if (req.method === "POST") {
-					const { filename, dataURL } = req.body;
-
-					const filepath = path.join(dir, filename);
-					const buffer = Buffer.from(dataURL, 'base64');
-
-					if (!fsSync.existsSync(dir)) {
-						try {
-							await fs.mkdir(dir, { recursive: true });
-						} catch(error) {
-							log.error('Cannot create directory for exports');
-							console.log(error);
-						}
-					}
-
-					try {
-						await fs.writeFile(filepath, buffer);
-
-						res.writeHead(200, {'Content-Type': 'application/json'});
-						res.end(JSON.stringify({ filepath }));
-					} catch(error) {
-						res.writeHead(500, {'Content-Type': 'application/json'});
-						res.end(JSON.stringify({ error }));
-					}
-				} else {
-					next();
-				}
-			});
-		}
-	}
-
-}

package/src/cli/server.js

@@ -1,153 +0,0 @@
-import path from "path";
-import kleur from "kleur";
-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, exportDir: options.exportDir }),
-            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(),
-            '__BUILD__': options.build,
-            '__DEV__': !options.build,
-
-        },
-        optimizeDeps: {
-            include: ['convert-length', 'webm-writer', 'changedpi'],
-            exclude: [
-                "@fragment/sketches",
-                ...entriesPaths,
-            ]
-        },
-        build: {
-            commonjsOptions: {
-                include: ['convert-length', 'webm-writer', 'changedpi'],
-            },
-        },
-    });
-
-    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:`);
-
-        const { resolvedUrls } = server;
-
-        for (const url of resolvedUrls.local) {
-            console.log(
-                `  ${kleur.green('➜')}  ${kleur.bold('Local')}:   ${kleur.cyan(
-                    url,
-                )}`,
-            );
-        }
-        for (const url of resolvedUrls.network) {
-            console.log(
-                `  ${kleur.green('➜')}  ${kleur.bold('Network')}: ${kleur.cyan(
-                    url,
-                )}`,
-            );
-        }
-
-        return server;
-    }
-}

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

@@ -1,15 +0,0 @@
-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/blank.js

@@ -1,13 +0,0 @@
-export let props = {};
-
-export let init = ({ canvas, width, height }) => {
-
-};
-
-export let update = ({ width, height, time, deltaTime }) => {
-	
-};
-
-export let resize = ({ width, height, pixelRatio }) => {
-
-};

package/src/cli/templates/fragment.js

@@ -1,18 +0,0 @@
-import fragmentShader from "./fragment.fs";
-
-let uniforms = {
-	uTime: { value: 0, type: "float" },
-};
-
-export let init = ({ frag }) => {
-	frag.uniforms = uniforms;
-	frag.shader = fragmentShader;
-};
-
-export let update = ({ frag, deltaTime }) => {
-	uniforms.uTime.value += deltaTime;
-
-	frag.render();
-};
-
-export let rendering = "fragment";

package/src/cli/templates/index.js

@@ -1,27 +0,0 @@
-const templates = {
-	"blank": [
-		"./templates/blank.js"
-	],
-	"2d": [
-		"./templates/2d.js"
-	],
-	"fragment": [
-		"./templates/fragment.js",
-		"./templates/fragment.fs"
-	],
-	"three/orthographic": [
-		"./templates/three-orthographic.js"
-	],
-	"three/fragment": [
-		"./templates/three-fragment.js",
-		"./templates/fragment.fs"
-	],
-	"three/perspective": [
-		"./templates/three-perspective.js"
-	],
-	"p5": [
-		"./templates/p5.js"
-	]
-};
-
-export default templates;

package/src/cli/templates/p5.js

@@ -1,13 +0,0 @@
-import p5 from "p5";
-
-export let props = {};
-
-export let setup = ({ p, width, height }) => {
-
-};
-
-export let draw = ({ p }) => {
-    p.background(255, 0, 0);
-};
-
-export let rendering = "p5";