@cocreate/elements 1.42.9 → 1.43.0

package/.github/workflows/automated.yml

@@ -1,8 +1,10 @@
 name: Automated Workflow
+
 on:
   push:
     branches:
       - master
+
 jobs:
   about:
     runs-on: ubuntu-latest
@@ -18,26 +20,37 @@ jobs:
         with:
           direction: overwrite-github
           githubToken: "${{ secrets.GITHUB }}"
+
   release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required so semantic-release can trace git tags/history
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22 # Required for the latest semantic-release plugins
-      - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v4 # Update to v4 for better Node 20+ support
-        id: semantic
-        with:
-          extra_plugins: |
-            @semantic-release/changelog
+          node-version: 22
+
+      - name: Install Semantic Release & Plugins
+        # Installs semantic-release and its plugins on the runner
+        run: |
+          npm install -g semantic-release \
+            @semantic-release/changelog \
+            @semantic-release/npm \
+            @semantic-release/github \
             @semantic-release/git
-            @semantic-release/github
+
+      - name: Run Semantic Release (Native)
+        id: semantic
+        # This will automatically pick up your export default config file in the repository root
+        run: npx semantic-release
         env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}" # Use the built-in token if possible
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
           NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+
     outputs:
       new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
-      new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
+      new_release_version: "${{ steps.semantic.outputs.new_release_version }}"

package/.github/workflows/manual.yml

@@ -14,8 +14,7 @@ jobs:
         env:
             DRY_RUN: ${{ github.event.inputs.dry_run }}
             GITHUB_TOKEN: "${{ secrets.GITHUB }}"
-            NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
-
+  
         steps:
             - name: Checkout
               uses: actions/checkout@v3

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [1.43.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.42.10...v1.43.0) (2026-07-17)
+
+
+### Bug Fixes
+
+* update import statements to include file extensions ([38f073c](https://github.com/CoCreate-app/CoCreate-elements/commit/38f073c45eff68c72eeae63d3c366a8bd7df3e1b))
+
+
+### Features
+
+* update automated workflow and release configuration for improved semantic release handling ([1cbe984](https://github.com/CoCreate-app/CoCreate-elements/commit/1cbe984012f4685ad7a0dbbd7f9ca940e26b9038))
+
+## [1.42.10](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.42.9...v1.42.10) (2026-07-11)
+
+
+### Bug Fixes
+
+* bump package versions ([92844e1](https://github.com/CoCreate-app/CoCreate-elements/commit/92844e16c8cbfb3928a9ebdd741f147b848e4cb3))
+* improve error handling and code formatting in fetchSrc.js ([4bc0e82](https://github.com/CoCreate-app/CoCreate-elements/commit/4bc0e8217f77d3c7c53f71c18153109abe2ebb87))
+* insert fetch src only from same origin ([5964a33](https://github.com/CoCreate-app/CoCreate-elements/commit/5964a338eac661fb0326c1b2a2241719ad434b57))
+* removed post install and add add packages to apprved list ([f7c6265](https://github.com/CoCreate-app/CoCreate-elements/commit/f7c62658265a8f5b5a13f20b44a90b5400e747f9))
+* semantic version handling ([c34d6ad](https://github.com/CoCreate-app/CoCreate-elements/commit/c34d6ada6acfba573318e9743cdf91196fb1855f))
+
 ## [1.42.9](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.42.8...v1.42.9) (2026-03-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.42.9",
+  "version": "1.43.0",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -18,8 +18,7 @@
   "scripts": {
     "start": "npx webpack --config webpack.config.js",
     "build": "npx webpack --mode=production --config webpack.config.js",
-    "dev": "npx webpack --config webpack.config.js --watch",
-    "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
+    "dev": "npx webpack --config webpack.config.js --watch"
   },
   "repository": {
     "type": "git",
@@ -36,22 +35,34 @@
     "url": "https://github.com/sponsors/CoCreate-app"
   },
   "main": "./src/index.js",
+  "dependencies": {
+    "@cocreate/actions": "^1.21.4",
+    "@cocreate/crud-client": "^1.34.6",
+    "@cocreate/element-prototype": "^1.31.4",
+    "@cocreate/filter": "^1.33.6",
+    "@cocreate/observer": "^1.19.0",
+    "@cocreate/render": "^1.46.1",
+    "@cocreate/utils": "^1.42.2"
+  },
   "devDependencies": {
-    "css-loader": "^5.1.3",
-    "esbuild": "^0.25.2",
-    "esbuild-loader": "^4.3.0",
-    "mini-css-extract-plugin": "^1.5.0",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0",
-    "webpack-log": "^3.0.1"
+    "@cocreate/webpack": "^1.4.3"
   },
-  "dependencies": {
-    "@cocreate/actions": "^1.21.1",
-    "@cocreate/crud-client": "^1.34.2",
-    "@cocreate/element-prototype": "^1.29.1",
-    "@cocreate/filter": "^1.33.2",
-    "@cocreate/observer": "^1.18.1",
-    "@cocreate/render": "^1.45.2",
-    "@cocreate/utils": "^1.39.0"
+  "allowScripts": {
+    "@cocreate/actions@1.21.4": true,
+    "@cocreate/api@1.22.5": true,
+    "@cocreate/config@1.13.4": true,
+    "@cocreate/crud-client@1.34.6": true,
+    "@cocreate/element-prototype@1.31.4": true,
+    "@cocreate/elements@1.42.9": true,
+    "@cocreate/filter@1.33.6": true,
+    "@cocreate/indexeddb@1.23.4": true,
+    "@cocreate/local-storage@1.16.5": true,
+    "@cocreate/observer@1.19.0": true,
+    "@cocreate/organizations@1.30.1": true,
+    "@cocreate/render@1.46.1": true,
+    "@cocreate/socket-client@1.40.5": true,
+    "@cocreate/utils@1.42.2": true,
+    "@cocreate/uuid@1.12.4": true,
+    "@cocreate/webpack@1.4.3": true
   }
 }

package/release.config.js

@@ -10,12 +10,20 @@ module.exports = {
         changelogFile: "CHANGELOG.md",
       },
     ],
-    "@semantic-release/npm",
-    "@semantic-release/github",
+    "@semantic-release/npm", 
     [
-      "@semantic-release/git",
+      "@semantic-release/github", 
       {
+        successComment: false,
+        failTitle: false,
+      },
+    ],
+    [
+      "@semantic-release/git", 
+      {
+        // Only stage and commit the changelog and package.json
         assets: ["CHANGELOG.md", "package.json"],
+        message: "chore(release): ${nextRelease.version} [skip ci]",
       },
     ],
   ],

package/src/fetchSrc.js

@@ -2,286 +2,313 @@ import observer from "@cocreate/observer";
 import { getRelativePath, ObjectId } from "@cocreate/utils";
 
 const selector =
-	"[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]";
-const textExtensions = ['html','htm','xhtml','css','js','mjs','cjs','json','jsonc','json5','xml','xsd','xsl','xslt','svg','md','markdown','scss','sass','less','vue','jsx','tsx','graphql','gql','htc','webmanifest','txt','csv','tsv','yaml','yml','toml','ini','log','dat','env','c','cc','cpp','cxx','h','hh','hpp','hxx','m','mm','cs','java','jsp','properties','py','pyc','pyd','pyo','rb','erb','php','phtml','php3','php4','php5','php7','phps','go','rs','swift','kt','kts','ts','pl','pm','pod','sh','bash','zsh','ksh','csh','tcsh','ps1','psm1','psd1','bat','cmd','sql','r','Rprofile','Rmd','lua','hs','lhs','erl','hrl','scala','sbt','d','f','for','f77','f90','f95','f03','f08','adb','ads','cbl','cob','cpy','lisp','lsp','scm','ss','pro','plg','vb','vbs','dart','asm','s','conf','cfg','config','ini','env','npmrc','yarnrc','gitattributes','gitignore','gitmodules','gitkeep','editorconfig','prettierrc','eslintrc','eslintignore','browserslistrc','package.json','package-lock.json','tsconfig.json','babelrc','vite.config.js','rollup.config.js','webpack.config.js','procfile','dockerfile','dockerignore','makefile','gradle','groovy','pom','properties','service','target','rst','adoc','asciidoc','tex','latex','textile','org','wiki','nfo','rtf','gcode','patch','diff','log','reg','map','sub','srt','dic','wml','rss','atom','gpx','kml','kmz','vcf','vcard','ics','ical','ps','eps','mf','lic','license','pem','key','crt','cert','pub','tpl','liquid','mustache','hbs','twig','blade.php','ejs','coffee','litcoffee','jl','nim','zig','wgsl']; const initializing = new Map();
+    "[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]";
+
+const initializing = new WeakMap();
+
+/**
+ * Validates whether a given URL string points to the current origin.
+ * Relative paths (e.g., "/partial.html") resolve to the same origin.
+ * @param {string} urlStr - The URL to validate
+ * @returns {boolean} True if safe/same-origin, false otherwise
+ */
+function isSameOrigin(urlStr) {
+    try {
+        // Resolve the URL against the current document's origin.
+        const url = new URL(urlStr, window.location.origin);
+        return url.origin === window.location.origin;
+    } catch (err) {
+        console.error("Invalid URL format:", urlStr, err);
+        return false;
+    }
+}
 
 function init(elements) {
-	if (elements && !Array.isArray(elements)) elements = [elements];
+    if (elements && !Array.isArray(elements)) elements = [elements];
 
-	if (!elements) elements = document.querySelectorAll(selector);
+    if (!elements) elements = document.querySelectorAll(selector);
 
-	initElements(elements);
+    initElements(elements);
 }
 
 async function initElements(elements) {
-	for (let element of elements) {
-		let src =
-			element.getAttribute("src") ||
-			element.getAttribute("source") ||
-			element.getAttribute("stream");
-
-		if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src)) continue;
-
-		let initialize = initializing.get(element);
-		if (initialize && initialize.src === src) continue;
-
-		initializing.set(element, { src });
-		try {
-			let state = localStorage.getItem("state"); // Assume this is your state object
-			let response = await fetch(src, {
-				headers: {
-					"X-State": state // Custom header to send state
-				}
-			});
-
-			if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
-				initMediaSource(element, src);
-			} else {
-				if (src && !textExtensions.includes(src.split('.').pop())) continue
-
-				if (element.hasAttribute("rendered")) {
-					element.removeAttribute("rendered");
-					// continue;
-				}
-				let text = await response.text();
-				if (text) {
-					let path = "";
-					let pathElement = element.closest("[path]");
-					if (pathElement) {
-						path =
-							pathElement.getAttribute("path") ||
-							getRelativePath();
-					} else {
-						path = getRelativePath();
-					}
-					// Replace $relativePath in the fetched text
-					if (path) {
-						text = text.replaceAll(/\$relativePath\/?/g, path);
-					}
-					// Replace ObjectId() with a new ObjectId
-					text = text.replaceAll("ObjectId()", () => {
-						// Generate a NEW ObjectId inside the function
-						return ObjectId().toString(); // Return its string representation
-					});
-					element.setValue(text);
-				}
-			}
-		} catch (err) {
-			console.log("FetchSrc error:" + err);
-		}
-	}
+    for (let element of elements) {
+        let src =
+            element.getAttribute("src") ||
+            element.getAttribute("source") ||
+            element.getAttribute("stream");
+
+        if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src)) continue;
+
+        let initialize = initializing.get(element);
+        if (initialize && initialize.src === src) continue;
+
+        initializing.set(element, { src });
+        try {
+            // --- SECURITY FIX: Conditional Sensitive Headers ---
+            // Only attach the local state header if fetching from the same origin.
+            let headers = {};
+            if (isSameOrigin(src)) {
+                let state = localStorage.getItem("state");
+                if (state) {
+                    headers["X-State"] = state;
+                }
+            }
+
+            let response = await fetch(src, { headers });
+
+            if (response.status === 404 || response.status === 403) {
+                element.setAttribute("error", response.status);
+                continue;
+            }
+
+            if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+                // Media streams can safely load cross-origin without risk of DOM-based XSS
+                initMediaSource(element, src);
+            } else {
+                // --- SECURITY FIX: Cross-Origin HTML Injection Prevention ---
+                // Only allow rendering the fetched response directly into the HTML tree if same-origin.
+                if (!isSameOrigin(src)) {
+                    console.warn(`[CoCreateSrc] Blocked inserting fetched text into HTML from cross-origin: ${src}`);
+                    element.setAttribute("error", "403-forbidden-cross-origin-html");
+                    continue;
+                }
+
+                if (element.hasAttribute("rendered")) {
+                    element.removeAttribute("rendered");
+                }
+                let text = await response.text();
+                if (text) {
+                    let path = "";
+                    let pathElement = element.closest("[path]");
+                    if (pathElement) {
+                        path =
+                            pathElement.getAttribute("path") ||
+                            getRelativePath();
+                    } else {
+                        path = getRelativePath();
+                    }
+                    // Replace $relativePath in the fetched text
+                    if (path) {
+                        text = text.replaceAll(/\$relativePath\/?/g, path);
+                    }
+                    // Replace ObjectId() with a new ObjectId
+                    text = text.replaceAll("ObjectId()", () => {
+                        return ObjectId().toString();
+                    });
+                    element.setValue(text);
+                }
+            }
+        } catch (err) {
+            console.log("FetchSrc error:" + err);
+        }
+    }
 }
 
 async function initMediaSource(element, src) {
-	try {
-		let mediaConfig = await response.json();
-		let sourceBuffer;
-
-		const mediaSource = new MediaSource();
-		element.src = URL.createObjectURL(mediaSource);
-		mediaSource.addEventListener("sourceopen", async () => {
-			sourceBuffer = mediaSource.addSourceBuffer(
-				`${mediaConfig["content-type"]}; codecs="${mediaConfig.codecs}"`
-			);
-
-			sourceBuffer.addEventListener("updateend", () => {
-				console.log(
-					"Update ended, buffered ranges:",
-					sourceBuffer.buffered
-				);
-				if (
-					!sourceBuffer.updating &&
-					mediaSource.readyState === "open"
-				) {
-					mediaSource.endOfStream();
-
-					element.addEventListener("ended", () => {
-						URL.revokeObjectURL(element.src);
-					});
-				}
-			});
-
-			sourceBuffer.addEventListener("error", (e) => {
-				console.error("SourceBuffer error event:", e);
-				console.log("MediaSource readyState:", mediaSource.readyState);
-				console.log("SourceBuffer updating:", sourceBuffer.updating);
-				console.log(
-					"SourceBuffer buffered ranges:",
-					sourceBuffer.buffered
-				);
-				// Any other state information you can log
-			});
-
-			getSegment(sourceBuffer, mediaConfig.segments[0]);
-		});
-
-		mediaSource.addEventListener("sourceended", () => {
-			console.log("MediaSource ended event fired");
-		});
-
-		mediaSource.addEventListener("sourceclose", () => {
-			console.log("MediaSource close event fired");
-		});
-
-		// Event listener for seeking
-		element.addEventListener("seeking", () => {
-			let currentTime = element.currentTime;
-			let chunkIndex = Math.floor(currentTime / chunkDuration);
-		});
-
-		// Event listener for seeked
-		element.addEventListener("seeked", () => {
-			let currentTime = element.currentTime;
-			if (isBuffered(element, currentTime)) return;
-
-			let query = {
-				start: { $lte: currentTime },
-				end: { $gte: currentTime }
-			};
-
-			let segments = queryData(mediaConfig.segments, query);
-			for (let segment of segments) {
-				getSegment(sourceBuffer, segment);
-			}
-		});
-
-		element.addEventListener("timeupdate", function () {
-			const bufferEnd = element.buffered.end(0);
-			const currentTime = element.currentTime;
-			const threshold = 10; // seconds before buffer end to fetch the next segment
-
-			if (bufferEnd - currentTime < threshold) {
-				// Time to fetch the next segment
-				getSegment(sourceBuffer, mediaConfig);
-			}
-		});
-	} catch (error) {
-		element.src = src;
-		// let blob = await response.json();
-		// URL.createObjectURL(blob);
-	}
+    try {
+        let response = await fetch(src);
+        let mediaConfig = await response.json();
+        let sourceBuffer;
+
+        const mediaSource = new MediaSource();
+        element.src = URL.createObjectURL(mediaSource);
+        mediaSource.addEventListener("sourceopen", async () => {
+            sourceBuffer = mediaSource.addSourceBuffer(
+                `${mediaConfig["content-type"]}; codecs="${mediaConfig.codecs}"`
+            );
+
+            sourceBuffer.addEventListener("updateend", () => {
+                console.log(
+                    "Update ended, buffered ranges:",
+                    sourceBuffer.buffered
+                );
+                if (
+                    !sourceBuffer.updating &&
+                    mediaSource.readyState === "open"
+                ) {
+                    mediaSource.endOfStream();
+
+                    element.addEventListener("ended", () => {
+                        URL.revokeObjectURL(element.src);
+                    });
+                }
+            });
+
+            sourceBuffer.addEventListener("error", (e) => {
+                console.error("SourceBuffer error event:", e);
+                console.log("MediaSource readyState:", mediaSource.readyState);
+                console.log("SourceBuffer updating:", sourceBuffer.updating);
+                console.log(
+                    "SourceBuffer buffered ranges:",
+                    sourceBuffer.buffered
+                );
+            });
+
+            getSegment(sourceBuffer, mediaConfig.segments[0]);
+        });
+
+        mediaSource.addEventListener("sourceended", () => {
+            console.log("MediaSource ended event fired");
+        });
+
+        mediaSource.addEventListener("sourceclose", () => {
+            console.log("MediaSource close event fired");
+        });
+
+        // Event listener for seeking
+        element.addEventListener("seeking", () => {
+            let currentTime = element.currentTime;
+            let chunkIndex = Math.floor(currentTime / chunkDuration);
+        });
+
+        // Event listener for seeked
+        element.addEventListener("seeked", () => {
+            let currentTime = element.currentTime;
+            if (isBuffered(element, currentTime)) return;
+
+            let query = {
+                start: { $lte: currentTime },
+                end: { $gte: currentTime }
+            };
+
+            let segments = queryData(mediaConfig.segments, query);
+            for (let segment of segments) {
+                getSegment(sourceBuffer, segment);
+            }
+        });
+
+        element.addEventListener("timeupdate", function () {
+            const bufferEnd = element.buffered.end(0);
+            const currentTime = element.currentTime;
+            const threshold = 10;
+
+            if (bufferEnd - currentTime < threshold) {
+                getSegment(sourceBuffer, mediaConfig);
+            }
+        });
+    } catch (error) {
+        element.src = src;
+    }
 }
 
 async function getSegment(sourceBuffer, segment) {
-	// TODO: use socket/crud/file with room using the url to get one or more segments and append
-	let segments = [];
-	let data;
-	if (segment.array && segment.object) {
-		data = { method: "object.read", ...segment };
-		data = await crud.send(data);
-		if (segment.key) {
-			// TODO: utils.getValuefromObject
-			if (Array.isArray(data.object[0][key]))
-				segments.push(...data.object[0][key]);
-			else segments.push(data.object[0][key]);
-		} else segments.push(...data.object);
-		segment.src = segments[0];
-		segment.src = await segment.src.text();
-		// TODO: handle segment array as
-	} else if (segment.src) {
-		// TODO: handle 404, or whether src was fetched or not
-		segment.src = await fetch(segment.src);
-		segment.src = await segment.src.text();
-	}
-
-	appendSegment(sourceBuffer, segment);
+    let segments = [];
+    let data;
+    if (segment.array && segment.object) {
+        data = { method: "object.read", ...segment };
+        data = await crud.send(data);
+        if (segment.key) {
+            if (Array.isArray(data.object[0][key]))
+                segments.push(...data.object[0][key]);
+            else segments.push(data.object[0][key]);
+        } else segments.push(...data.object);
+        segment.src = segments[0];
+        segment.src = await segment.src.text();
+    } else if (segment.src) {
+        // Media segments are safe to fetch cross-origin as they're not processed as HTML
+        let response = await fetch(segment.src);
+        if (response.status === 404 || response.status === 403) {
+            console.warn(`Segment fetch failed with status: ${response.status}`);
+            return;
+        }
+        segment.src = await response.text();
+    }
+
+    appendSegment(sourceBuffer, segment);
 }
 
 async function appendSegment(sourceBuffer, segment) {
-	let arrayBuffer = segment.src;
-	if (typeof segment.src === "string") {
-		try {
-			arrayBuffer = base64ToArrayBuffer(segment.src);
-		} catch (e) {
-			console.error("Base64 decode error:", e);
-		}
-	} else if (segment.src instanceof ArrayBuffer) {
-		arrayBuffer = segment.src;
-	} else if (segment.src instanceof Blob) {
-		arrayBuffer = await segment.src.arrayBuffer();
-	} else {
-		arrayBuffer = base64ToArrayBuffer(segment.src);
-
-		// arrayBuffer = await segment.src.arrayBuffer();
-	}
-
-	// Wait for the source buffer to be ready for updates
-	if (sourceBuffer.updating)
-		await new Promise((resolve) =>
-			sourceBuffer.addEventListener("updateend", resolve, { once: true })
-		);
-
-	sourceBuffer.appendBuffer(arrayBuffer);
-	console.log(sourceBuffer);
+    let arrayBuffer = segment.src;
+    if (typeof segment.src === "string") {
+        try {
+            arrayBuffer = base64ToArrayBuffer(segment.src);
+        } catch (e) {
+            console.error("Base64 decode error:", e);
+        }
+    } else if (segment.src instanceof ArrayBuffer) {
+        arrayBuffer = segment.src;
+    } else if (segment.src instanceof Blob) {
+        arrayBuffer = await segment.src.arrayBuffer();
+    } else {
+        arrayBuffer = base64ToArrayBuffer(segment.src);
+    }
+
+    if (sourceBuffer.updating)
+        await new Promise((resolve) =>
+            sourceBuffer.addEventListener("updateend", resolve, { once: true })
+        );
+
+    sourceBuffer.appendBuffer(arrayBuffer);
+    console.log(sourceBuffer);
 }
 
 function isBuffered(element, currentTime) {
-	for (let i = 0; i < element.buffered.length; i++) {
-		if (
-			currentTime >= element.buffered.start(i) &&
-			currentTime <= element.buffered.end(i)
-		) {
-			return true; // The currentTime is within a buffered range
-		}
-	}
-	return false; // The currentTime is not buffered
+    for (let i = 0; i < element.buffered.length; i++) {
+        if (
+            currentTime >= element.buffered.start(i) &&
+            currentTime <= element.buffered.end(i)
+        ) {
+            return true;
+        }
+    }
+    return false;
 }
 
 function base64ToBlob(base64, contentType = "") {
-	const binaryString = atob(base64.split(",")[1]);
-	const len = binaryString.length;
-	const uint8Array = new Uint8Array(len);
-	for (let i = 0; i < len; i++) {
-		uint8Array[i] = binaryString.charCodeAt(i);
-	}
-	return new Blob([uint8Array], { type: contentType });
+    const binaryString = atob(base64.split(",")[1]);
+    const len = binaryString.length;
+    const uint8Array = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        uint8Array[i] = binaryString.charCodeAt(i);
+    }
+    return new Blob([uint8Array], { type: contentType });
 }
 
 function base64ToArrayBuffer(base64) {
-	const binaryString = window.atob(base64.split(",")[1]); // Decode base64
-	const len = binaryString.length;
-	const bytes = new Uint8Array(len);
-	for (let i = 0; i < len; i++) {
-		bytes[i] = binaryString.charCodeAt(i);
-	}
-	return bytes.buffer; // Return ArrayBuffer
+    const binaryString = window.atob(base64.split(",")[1]);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
 }
 
 observer.init({
-	name: "CoCreateSrc",
-	types: ["addedNodes"],
-	selector: selector,
-	callback: function (mutation) {
-		init(mutation.target);
-	}
+    name: "CoCreateSrc",
+    types: ["addedNodes"],
+    selector: selector,
+    callback: function (mutation) {
+        init(mutation.target);
+    }
 });
 
 observer.init({
-	name: "CoCreateSrcOperator",
-	types: ["addedNodes"],
-	selector: "img",
-	// selector: "img, video, audio, script, input, iframe, frame, link, source",
-	callback: function (mutation) {
-		let src = mutation.target.getAttribute("src");
-		if (src) {
-			mutation.target.setAttribute("src", src);
-		}
-	}
+    name: "CoCreateSrcOperator",
+    types: ["addedNodes"],
+    selector: "img",
+    callback: function (mutation) {
+        let src = mutation.target.getAttribute("src");
+        if (src) {
+            mutation.target.setAttribute("src", src);
+        }
+    }
 });
 
 observer.init({
-	name: "CoCreateSrcAttributes",
-	types: ["attributes"],
-	attributeFilter: ["src"],
-	selector: selector,
-	callback: function (mutation) {
-		if (
-			mutation.oldValue !==
-			mutation.target.getAttribute(mutation.attributeName)
-		) {
-			init(mutation.target);
-		}
-	}
+    name: "CoCreateSrcAttributes",
+    types: ["attributes"],
+    attributeFilter: ["src"],
+    selector: selector,
+    callback: function (mutation) {
+        if (
+            mutation.oldValue !==
+            mutation.target.getAttribute(mutation.attributeName)
+        ) {
+            init(mutation.target);
+        }
+    }
 });
 
-init();
+init();

package/src/index.js

@@ -38,8 +38,8 @@ import {
 import filter from "@cocreate/filter";
 import { render, renderValue, renderedNodes } from "@cocreate/render";
 import "@cocreate/element-prototype";
-import "./fetchSrc";
-import { reset } from "./form";
+import "./fetchSrc.js";
+import { reset } from "./form.js";
 import "./value.js";
 
 const selector = "[storage], [database], [array], [render-json]";