onejs-core 0.3.5

package/styling/index.tsx

@@ -0,0 +1,80 @@
+import { h } from "preact"
+import flatten from "css-flatten"
+import { forwardRef } from "preact/compat"
+import generateComponentId from "./utils/generateComponentId"
+
+export function hashAndAddRuntimeUSS(style: string) {
+    let compId = generateComponentId(style)
+    style = `.${compId} {${style}}`
+    style = flatten(style)
+    document.addRuntimeUSS(style)
+
+    return compId
+}
+
+function _processTemplate(props, strings: TemplateStringsArray, values: any[]) {
+    // ref: https://medium.com/styled-components/how-styled-components-works-618a69970421
+    let style = values.reduce((result, expr, index) => {
+        let value = typeof expr === "function" ? expr(props) : expr
+        if (typeof value === "function")
+            value = value(props)
+
+        return result + (value ? value : "") + strings[index + 1]
+    }, strings[0])
+    return style as string
+}
+
+export function styled<T extends keyof h.JSX.IntrinsicElements>(Tag: T | ((props?) => h.JSX.Element)) {
+    const AnyTag = Tag as any
+
+    const tag = function (strings: TemplateStringsArray, ...values) {
+        return forwardRef((props, ref) => {
+            let style = _processTemplate(props, strings, values)
+            let compId = hashAndAddRuntimeUSS(style)
+            return <AnyTag ref={ref} class={compId} {...props}></AnyTag>
+        }) as (props: h.JSX.IntrinsicElements[T], ref: any) => h.JSX.Element
+    }
+
+    tag.attrs = (func: (props: any) => ({})) => {
+        return function (strings: TemplateStringsArray, ...values) {
+            return (props) => {
+                let defaultProps = func(props)
+                let condensedProps = Object.assign({}, defaultProps, props)
+                let style = _processTemplate(condensedProps, strings, values)
+                let compId = hashAndAddRuntimeUSS(style)
+
+                return <AnyTag class={compId} {...condensedProps}></AnyTag>
+            }
+        }
+    }
+
+    return tag
+}
+
+styled.div = styled("div")
+styled.button = styled("button")
+styled.textfield = styled("textfield")
+
+export const uss = function (strings: TemplateStringsArray, ...values) {
+    return (props) => {
+        return _processTemplate(props, strings, values)
+    }
+}
+
+/**
+ * Similar to the Emotion api, this function takes a template string and returns
+ * a class name that can be used to style an element.
+ * @param strings
+ * @param values
+ * @returns
+ */
+export const emo = function (strings: TemplateStringsArray, ...values: any[]): string {
+    let style = values.reduce((result, expr, index) => {
+        const value = expr
+        return result + (value ? value : "") + strings[index + 1]
+    }, strings[0])
+
+    return hashAndAddRuntimeUSS(style)
+}
+
+export type CompType<T,K> = (props: K | T, ref: any) => h.JSX.Element

package/styling/utils/generateAlphabeticName.ts

@@ -0,0 +1,21 @@
+const AD_REPLACER_R = /(a)(d)/gi
+
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
+ * counterparts */
+const charsLength = 52
+
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
+const getAlphabeticChar = (code: number) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+/* input a number, usually a hash and convert it to base-52 */
+export default function generateAlphabeticName(code: number) {
+    let name = ''
+    let x
+
+    /* get a char and divide by alphabet-length */
+    for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
+        name = getAlphabeticChar(x % charsLength) + name
+    }
+
+    return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2')
+}

package/styling/utils/generateComponentId.ts

@@ -0,0 +1,6 @@
+import generateAlphabeticName from './generateAlphabeticName'
+import { hash } from './hash'
+
+export default function generateComponentId(str: string) {
+    return generateAlphabeticName(hash(str) >>> 0)
+}

package/styling/utils/hash.ts

@@ -0,0 +1,46 @@
+export const SEED = 5381;
+
+// When we have separate strings it's useful to run a progressive
+// version of djb2 where we pretend that we're still looping over
+// the same string
+export const phash = (h: number, x: string) => {
+    let i = x.length;
+
+    while (i) {
+        h = (h * 33) ^ x.charCodeAt(--i);
+    }
+
+    return h;
+};
+
+// This is a djb2 hashing function
+export const hash = (x: string) => {
+    return phash(SEED, x);
+};
+
+const AD_REPLACER_R = /(a)(d)/gi
+
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
+ * counterparts */
+const charsLength = 52
+
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
+const getAlphabeticChar = (code: number) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+/* input a number, usually a hash and convert it to base-52 */
+export function generateAlphabeticName(code: number) {
+    let name = ''
+    let x
+
+    /* get a char and divide by alphabet-length */
+    for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
+        name = getAlphabeticChar(x % charsLength) + name
+    }
+
+    return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2')
+}
+
+export default function generateComponentId(str: string) {
+    return generateAlphabeticName(hash(str) >>> 0)
+}
+

package/switch.cjs

@@ -0,0 +1,185 @@
+const fs = require('fs')
+const tar = require('tar')
+const url = require('url')
+const path = require('path')
+const fse = require('fs-extra')
+const { rimraf } = require('rimraf')
+
+const fsp = fs.promises
+
+const backends = [
+    { name: "QuickJS", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.1.0/PuerTS_Quickjs_2.1.0.tgz" },
+    { name: "V8", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.1.0/PuerTS_V8_2.1.0.tgz" },
+    { name: "NodeJS", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.1.0/PuerTS_Nodejs_2.1.0.tgz" }
+]
+
+const args = process.argv.slice(2)
+
+if (args.length > 0 && args[0].toLowerCase() == "clear") {
+    for (const backend of backends) {
+        const filename = getFilenameFromUrl(backend.tgzUrl)
+        const outputDir = "./tmp"
+        const downloadedPath = path.join(outputDir, filename)
+        if (fs.existsSync(downloadedPath)) {
+            fs.unlinkSync(downloadedPath)
+            console.log(`Deleted ${downloadedPath}`)
+        }
+    }
+} else if (args.length > 0 && ["quickjs", "v8", "nodejs"].includes(args[0].toLowerCase())) {
+    const backend = backends.find(b => b.name.toLowerCase() === args[0])
+    const outputDir = "./tmp"
+    Process(backend, outputDir)
+} else {
+    console.log("Usage: npm run switch <quickjs|v8|nodejs|clear>\n")
+    console.log("           quickjs: Switch to QuickJS backend")
+    console.log("           v8: Switch to V8 backend")
+    console.log("           nodejs: Switch to NodeJS backend")
+    console.log("           clear: Clear all downloaded .tgz files\n")
+}
+
+async function Process(backend, outputDir) {
+    try {
+        // Download
+        const downloadedPath = await downloadFile(backend.tgzUrl, outputDir)
+
+        // Extraction
+        const upmDir = path.join(outputDir, "upm")
+        if (fs.existsSync(upmDir)) {
+            await rimraf(upmDir)
+        }
+        await extractTgz(downloadedPath, outputDir)
+
+        // Safe keep asmdef files
+        const onejsDir = getOneJSUnityDir()
+        const a = path.join(onejsDir, 'Puerts/Editor/com.tencent.puerts.core.Editor.asmdef')
+        const b = path.join(upmDir, 'Editor/com.tencent.puerts.core.Editor.asmdef')
+        const c = path.join(onejsDir, 'Puerts/Runtime/com.tencent.puerts.core.asmdef')
+        const d = path.join(upmDir, 'Runtime/com.tencent.puerts.core.asmdef')
+        await fse.copy(a, b)
+        await fse.copy(c, d)
+
+        // Replace OneJS/Puerts with the new one
+        const puertsDir = path.join(onejsDir, "Puerts")
+        if (await deleteDirectorySafely(puertsDir)) {
+            await fse.copy(upmDir, puertsDir)
+            console.log(`Switched to ${backend.name} successfully.`)
+        } else {
+            console.error("Failed to delete old Puerts directory. Please make sure Unity Editor is not running as it may be using the files. (We cannot reliably replace native plugins while Unity Editor is using them)")
+        }
+    } catch (err) {
+        console.error(`Error: ${err.message}`)
+    }
+}
+
+// --- Support Functions ---
+
+function getOneJSUnityDir() {
+    var packageJsonPath = path.join(__dirname, '../package.json')
+    var json = require(packageJsonPath)
+    return json.onejs.unityPackagePath
+}
+
+function ensureDirectoryExistence(filePath) {
+    const dirname = path.dirname(filePath);
+    if (fs.existsSync(dirname)) {
+        return true;
+    }
+    fs.mkdirSync(dirname, { recursive: true });
+}
+
+function getFilenameFromUrl(fileUrl) {
+    const parsedUrl = url.parse(fileUrl);
+    return path.basename(parsedUrl.pathname);
+}
+
+async function downloadFile(fileUrl, outputDir) {
+    const filename = getFilenameFromUrl(fileUrl);
+    const outputLocationPath = path.join(outputDir, filename);
+
+    ensureDirectoryExistence(outputLocationPath);
+
+    // Check if the file already exists
+    if (fs.existsSync(outputLocationPath)) {
+        console.log(`Local .tgz found: ${outputLocationPath}`);
+        return outputLocationPath;
+    }
+
+    console.log(`Downloading ${filename}`);
+    const response = await fetch(fileUrl);
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch ${fileUrl}: ${response.statusText}`);
+    }
+
+    const fileStream = fs.createWriteStream(outputLocationPath);
+    for await (const chunk of response.body) {
+        fileStream.write(chunk);
+    }
+
+    fileStream.end();
+    fileStream.on('finish', () => {
+        console.log(`Download completed: ${outputLocationPath}`);
+    });
+
+    return new Promise((resolve, reject) => {
+        fileStream.on('close', () => resolve(outputLocationPath));
+        fileStream.on('error', reject);
+    });
+}
+
+async function extractTgz(filePath, outputDir) {
+    await tar.x({
+        file: filePath,
+        cwd: outputDir,
+    })
+    console.log(`Extraction completed.`);
+}
+
+
+
+async function checkFileInUse(file) {
+    try {
+        const handle = await fsp.open(file, 'r+');
+        await handle.close();
+    } catch (err) {
+        if (err.code === 'EBUSY' || err.code === 'EPERM' || err.code === 'EACCES') {
+            console.error('File is in use by another program or access is denied:', err);
+            return false;
+        } else {
+            console.error('Cannot access file:', err);
+            return false;
+        }
+    }
+    return true;
+}
+
+async function checkAllDeletable(currentPath) {
+    try {
+        const stats = await fsp.stat(currentPath);
+
+        if (stats.isDirectory()) {
+            const files = await fsp.readdir(currentPath);
+
+            for (const file of files) {
+                const deletable = await checkAllDeletable(path.join(currentPath, file));
+                if (!deletable) {
+                    return false;
+                }
+            }
+            return true;
+        } else {
+            return await checkFileInUse(currentPath);
+        }
+    } catch (err) {
+        console.log(`Error accessing: ${currentPath}, ${err}`);
+        return false;
+    }
+}
+
+async function deleteDirectorySafely(dirPath) {
+    if (await checkAllDeletable(dirPath)) {
+        await rimraf(dirPath)
+        return true
+    }
+    return false
+}

package/uss-transform-plugin.cjs

@@ -0,0 +1,83 @@
+module.exports = () => {
+    const screenBreakpoints = {
+        'sm': 640,
+        'md': 768,
+        'lg': 1024,
+        'xl': 1280,
+        '2xl': 1536,
+    };
+    return {
+        postcssPlugin: 'uss-transform',
+        Once(root, { result }) {
+            root.walkRules((rule) => {
+                // Transform class selectors
+                rule.selectors = rule.selectors.map(selector =>
+                    "." + selector.slice(1).replace(/(\\\.|\\#|\\%|\\:|\\\/|\\\[|\\\]|\\\(|\\\)|\\2c)/g, match => {
+                        switch (match) {
+                            case '\\.': return '_d_';
+                            case '\\#': return '_n_';
+                            case '\\%': return '_p_';
+                            case '\\:': return '_c_';
+                            case '\\/': return '_s_';
+                            case '\\[': return '_lb_';
+                            case '\\]': return '_rb_';
+                            case '\\(': return '_lp_';
+                            case '\\)': return '_rp_';
+                            case '\\2c': return '_cm_';
+                            default: return match;
+                        }
+                    })
+                );
+            });
+
+            // RGB to RGBA conversion
+            root.walkDecls(decl => {
+                if (decl.value.includes('rgb(')) {
+                    decl.value = decl.value.replace(/rgb\((.*?) \/\s*(.*?)\)/g, 'rgba($1 $2)');
+                }
+            });
+
+            // Handle hexadecimal colors with alpha value to RGBA conversion
+            root.walkDecls(decl => {
+                decl.value = decl.value.replace(/: #([A-Fa-f0-9]{8})/g, (match, hex) => {
+                    const r = parseInt(hex.slice(0, 2), 16);
+                    const g = parseInt(hex.slice(2, 4), 16);
+                    const b = parseInt(hex.slice(4, 6), 16);
+                    const a = parseInt(hex.slice(6, 8), 16) / 255;
+                    return `: rgba(${r}, ${g}, ${b}, ${a})`;
+                });
+            });
+
+            // Media queries transformation
+            root.walkAtRules('media', atRule => {
+                // Extract the min-width value from the media query
+                const minWidthMatch = atRule.params.match(/min-width:\s*(\d+)px/);
+                if (minWidthMatch) {
+                    const minWidthValue = parseInt(minWidthMatch[1], 10);
+
+                    // Determine the correct breakpoint
+                    let appliedBreakpointName = null;
+                    Object.entries(screenBreakpoints).forEach(([name, value]) => {
+                        if (minWidthValue >= value) {
+                            appliedBreakpointName = name;
+                        }
+                    });
+
+                    if (appliedBreakpointName) {
+                        const className = `.onejs-media-${appliedBreakpointName}`;
+
+                        // Prepend the class to each rule inside this media query
+                        atRule.walkRules(rule => {
+                            rule.selectors = rule.selectors.map(selector => `${className} ${selector}`);
+                        });
+
+                        // Remove the @media rule by replacing it with its contents
+                        atRule.replaceWith(atRule.nodes);
+                    }
+                }
+            });
+        }
+    };
+};
+
+module.exports.postcss = true;

package/utils/color-palettes.ts

@@ -0,0 +1,3 @@
+let palettes = [["#69d2e7", "#a7dbd8", "#e0e4cc", "#f38630", "#fa6900"], ["#fe4365", "#fc9d9a", "#f9cdad", "#c8c8a9", "#83af9b"], ["#ecd078", "#d95b43", "#c02942", "#542437", "#53777a"], ["#556270", "#4ecdc4", "#c7f464", "#ff6b6b", "#c44d58"], ["#774f38", "#e08e79", "#f1d4af", "#ece5ce", "#c5e0dc"], ["#e8ddcb", "#cdb380", "#036564", "#033649", "#031634"], ["#490a3d", "#bd1550", "#e97f02", "#f8ca00", "#8a9b0f"], ["#594f4f", "#547980", "#45ada8", "#9de0ad", "#e5fcc2"], ["#00a0b0", "#6a4a3c", "#cc333f", "#eb6841", "#edc951"], ["#e94e77", "#d68189", "#c6a49a", "#c6e5d9", "#f4ead5"], ["#3fb8af", "#7fc7af", "#dad8a7", "#ff9e9d", "#ff3d7f"], ["#d9ceb2", "#948c75", "#d5ded9", "#7a6a53", "#99b2b7"], ["#ffffff", "#cbe86b", "#f2e9e1", "#1c140d", "#cbe86b"], ["#efffcd", "#dce9be", "#555152", "#2e2633", "#99173c"], ["#343838", "#005f6b", "#008c9e", "#00b4cc", "#00dffc"], ["#413e4a", "#73626e", "#b38184", "#f0b49e", "#f7e4be"], ["#ff4e50", "#fc913a", "#f9d423", "#ede574", "#e1f5c4"], ["#99b898", "#fecea8", "#ff847c", "#e84a5f", "#2a363b"], ["#655643", "#80bca3", "#f6f7bd", "#e6ac27", "#bf4d28"], ["#00a8c6", "#40c0cb", "#f9f2e7", "#aee239", "#8fbe00"], ["#351330", "#424254", "#64908a", "#e8caa4", "#cc2a41"], ["#554236", "#f77825", "#d3ce3d", "#f1efa5", "#60b99a"], ["#5d4157", "#838689", "#a8caba", "#cad7b2", "#ebe3aa"], ["#8c2318", "#5e8c6a", "#88a65e", "#bfb35a", "#f2c45a"], ["#fad089", "#ff9c5b", "#f5634a", "#ed303c", "#3b8183"], ["#ff4242", "#f4fad2", "#d4ee5e", "#e1edb9", "#f0f2eb"], ["#f8b195", "#f67280", "#c06c84", "#6c5b7b", "#355c7d"], ["#d1e751", "#ffffff", "#000000", "#4dbce9", "#26ade4"], ["#1b676b", "#519548", "#88c425", "#bef202", "#eafde6"], ["#5e412f", "#fcebb6", "#78c0a8", "#f07818", "#f0a830"], ["#bcbdac", "#cfbe27", "#f27435", "#f02475", "#3b2d38"], ["#452632", "#91204d", "#e4844a", "#e8bf56", "#e2f7ce"], ["#eee6ab", "#c5bc8e", "#696758", "#45484b", "#36393b"], ["#f0d8a8", "#3d1c00", "#86b8b1", "#f2d694", "#fa2a00"], ["#2a044a", "#0b2e59", "#0d6759", "#7ab317", "#a0c55f"], ["#f04155", "#ff823a", "#f2f26f", "#fff7bd", "#95cfb7"], ["#b9d7d9", "#668284", "#2a2829", "#493736", "#7b3b3b"], ["#bbbb88", "#ccc68d", "#eedd99", "#eec290", "#eeaa88"], ["#b3cc57", "#ecf081", "#ffbe40", "#ef746f", "#ab3e5b"], ["#a3a948", "#edb92e", "#f85931", "#ce1836", "#009989"], ["#300030", "#480048", "#601848", "#c04848", "#f07241"], ["#67917a", "#170409", "#b8af03", "#ccbf82", "#e33258"], ["#aab3ab", "#c4cbb7", "#ebefc9", "#eee0b7", "#e8caaf"], ["#e8d5b7", "#0e2430", "#fc3a51", "#f5b349", "#e8d5b9"], ["#ab526b", "#bca297", "#c5ceae", "#f0e2a4", "#f4ebc3"], ["#607848", "#789048", "#c0d860", "#f0f0d8", "#604848"], ["#b6d8c0", "#c8d9bf", "#dadabd", "#ecdbbc", "#fedcba"], ["#a8e6ce", "#dcedc2", "#ffd3b5", "#ffaaa6", "#ff8c94"], ["#3e4147", "#fffedf", "#dfba69", "#5a2e2e", "#2a2c31"], ["#fc354c", "#29221f", "#13747d", "#0abfbc", "#fcf7c5"], ["#cc0c39", "#e6781e", "#c8cf02", "#f8fcc1", "#1693a7"], ["#1c2130", "#028f76", "#b3e099", "#ffeaad", "#d14334"], ["#a7c5bd", "#e5ddcb", "#eb7b59", "#cf4647", "#524656"], ["#dad6ca", "#1bb0ce", "#4f8699", "#6a5e72", "#563444"], ["#5c323e", "#a82743", "#e15e32", "#c0d23e", "#e5f04c"], ["#edebe6", "#d6e1c7", "#94c7b6", "#403b33", "#d3643b"], ["#fdf1cc", "#c6d6b8", "#987f69", "#e3ad40", "#fcd036"], ["#230f2b", "#f21d41", "#ebebbc", "#bce3c5", "#82b3ae"], ["#b9d3b0", "#81bda4", "#b28774", "#f88f79", "#f6aa93"], ["#3a111c", "#574951", "#83988e", "#bcdea5", "#e6f9bc"], ["#5e3929", "#cd8c52", "#b7d1a3", "#dee8be", "#fcf7d3"], ["#1c0113", "#6b0103", "#a30006", "#c21a01", "#f03c02"], ["#000000", "#9f111b", "#b11623", "#292c37", "#cccccc"], ["#382f32", "#ffeaf2", "#fcd9e5", "#fbc5d8", "#f1396d"], ["#e3dfba", "#c8d6bf", "#93ccc6", "#6cbdb5", "#1a1f1e"], ["#f6f6f6", "#e8e8e8", "#333333", "#990100", "#b90504"], ["#1b325f", "#9cc4e4", "#e9f2f9", "#3a89c9", "#f26c4f"], ["#a1dbb2", "#fee5ad", "#faca66", "#f7a541", "#f45d4c"], ["#c1b398", "#605951", "#fbeec2", "#61a6ab", "#accec0"], ["#5e9fa3", "#dcd1b4", "#fab87f", "#f87e7b", "#b05574"], ["#951f2b", "#f5f4d7", "#e0dfb1", "#a5a36c", "#535233"], ["#8dccad", "#988864", "#fea6a2", "#f9d6ac", "#ffe9af"], ["#2d2d29", "#215a6d", "#3ca2a2", "#92c7a3", "#dfece6"], ["#413d3d", "#040004", "#c8ff00", "#fa023c", "#4b000f"], ["#eff3cd", "#b2d5ba", "#61ada0", "#248f8d", "#605063"], ["#ffefd3", "#fffee4", "#d0ecea", "#9fd6d2", "#8b7a5e"], ["#cfffdd", "#b4dec1", "#5c5863", "#a85163", "#ff1f4c"], ["#9dc9ac", "#fffec7", "#f56218", "#ff9d2e", "#919167"], ["#4e395d", "#827085", "#8ebe94", "#ccfc8e", "#dc5b3e"], ["#a8a7a7", "#cc527a", "#e8175d", "#474747", "#363636"], ["#f8edd1", "#d88a8a", "#474843", "#9d9d93", "#c5cfc6"], ["#046d8b", "#309292", "#2fb8ac", "#93a42a", "#ecbe13"], ["#f38a8a", "#55443d", "#a0cab5", "#cde9ca", "#f1edd0"], ["#a70267", "#f10c49", "#fb6b41", "#f6d86b", "#339194"], ["#ff003c", "#ff8a00", "#fabe28", "#88c100", "#00c176"], ["#ffedbf", "#f7803c", "#f54828", "#2e0d23", "#f8e4c1"], ["#4e4d4a", "#353432", "#94ba65", "#2790b0", "#2b4e72"], ["#0ca5b0", "#4e3f30", "#fefeeb", "#f8f4e4", "#a5b3aa"], ["#4d3b3b", "#de6262", "#ffb88c", "#ffd0b3", "#f5e0d3"], ["#fffbb7", "#a6f6af", "#66b6ab", "#5b7c8d", "#4f2958"], ["#edf6ee", "#d1c089", "#b3204d", "#412e28", "#151101"], ["#9d7e79", "#ccac95", "#9a947c", "#748b83", "#5b756c"], ["#fcfef5", "#e9ffe1", "#cdcfb7", "#d6e6c3", "#fafbe3"], ["#9cddc8", "#bfd8ad", "#ddd9ab", "#f7af63", "#633d2e"], ["#30261c", "#403831", "#36544f", "#1f5f61", "#0b8185"], ["#aaff00", "#ffaa00", "#ff00aa", "#aa00ff", "#00aaff"], ["#d1313d", "#e5625c", "#f9bf76", "#8eb2c5", "#615375"], ["#ffe181", "#eee9e5", "#fad3b2", "#ffba7f", "#ff9c97"], ["#73c8a9", "#dee1b6", "#e1b866", "#bd5532", "#373b44"], ["#805841", "#dcf7f3", "#fffcdd", "#ffd8d8", "#f5a2a2"]]
+
+export { palettes }