feat: properly handle innerHTML and other direct script properties

Author: thedanchez

.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)

.changeset/config.json

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

.changeset/modern-peas-check.md

@@ -0,0 +1,5 @@
+---
+"solid-create-script": minor
+---
+
+Adds proper handling of direct script properties like async, defer and innerHTML.

.prettierrc

@@ -1,3 +1,3 @@
 {
-  "printWidth": 120
+  "printWidth": 100
 }

.vscode/settings.json

@@ -3,7 +3,7 @@
     "source.fixAll": "always"
   },
   "editor.formatOnSave": true,
-  "editor.rulers": [120],
+  "editor.rulers": [100],
   "files.autoSave": "onFocusChange",
   "files.insertFinalNewline": true
 }

bun.lock

@@ -39,6 +39,9 @@
     "build": "tsup",
     "build:watch": "tsup --watch",
     "dev": "vite",
+    "changeset": "changeset",
+    "update-pkg-version": "changeset version",
+    "release": "changeset publish",
     "format": "prettier . --check",
     "format:fix": "prettier . --write",
     "lint": "eslint . --ext .ts,.tsx",
@@ -50,6 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.29.3",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.5.0",
     "@types/bun": "^1.1.10",

bun.lockb

@@ -1,7 +1,9 @@
 import { createScript } from "../src";
 
 export const App = () => {
-  const script = createScript("https://cdn.plaid.com/link/v2/stable/link-initialize.js", { defer: true });
+  const script = createScript("https://cdn.plaid.com/link/v2/stable/link-initialize.js", {
+    defer: true,
+  });
 
   return (
     <div>

package.json

@@ -1,18 +1,70 @@
-import { createResource, type JSX, splitProps } from "solid-js";
+import { createResource, type JSX, mergeProps, splitProps, untrack } from "solid-js";
 import type { DOMElement } from "solid-js/jsx-runtime";
 
-type ScriptAttributes = Omit<JSX.ScriptHTMLAttributes<HTMLScriptElement>, "src">;
+import type { FetchPriority, ReferrerPolicy, ScriptType } from "./types";
+
+type ScriptAttributes = Omit<
+  JSX.ScriptHTMLAttributes<HTMLScriptElement>,
+  "src" | "referrerPolicy" | "fetchpriority" | "type"
+> & {
+  referrerPolicy?: ReferrerPolicy;
+  fetchPriority?: FetchPriority;
+  type?: ScriptType;
+};
 
 type ScriptEvent = Event & {
   currentTarget: HTMLScriptElement;
   target: DOMElement;
 };
 
+type DirectScriptAttributes = Pick<
+  ScriptAttributes,
+  | "async"
+  | "defer"
+  | "innerHTML"
+  | "fetchPriority"
+  | "noModule"
+  | "type"
+  | "crossOrigin"
+  | "referrerPolicy"
+  | "integrity"
+  | "nonce"
+>;
+
+const DIRECT_SCRIPT_ATTRIBUTES = [
+  "async",
+  "defer",
+  "innerHTML",
+  "fetchPriority",
+  "noModule",
+  "type",
+  "crossOrigin",
+  "referrerPolicy",
+  "integrity",
+  "nonce",
+] as Readonly<(keyof DirectScriptAttributes)[]>;
+
 // Promise cache for script sources
 const SCRIPT_PROMISES = new Map<string, Promise<Event>>();
 
 const loadScript = async (src: string, attributes: Readonly<ScriptAttributes>) => {
-  const [initEvents, otherAttributes] = splitProps(attributes, ["onload", "onLoad", "onerror", "onError"]);
+  const _attributes = mergeProps(
+    {
+      async: true,
+      defer: false,
+      innerHTML: "",
+      fetchPriority: "auto" as FetchPriority,
+    },
+    attributes,
+  );
+
+  const [initEvents, otherAttributes] = splitProps(_attributes, [
+    "onload",
+    "onLoad",
+    "onerror",
+    "onError",
+  ]);
+  const [directAttributes, restAttributes] = splitProps(otherAttributes, DIRECT_SCRIPT_ATTRIBUTES);
 
   // 1. Reject if no src provided
   if (!src) return Promise.reject(new Error('No "src" provided for createScript'));
@@ -21,12 +73,36 @@ const loadScript = async (src: string, attributes: Readonly<ScriptAttributes>) =
   if (SCRIPT_PROMISES.has(src)) return SCRIPT_PROMISES.get(src)!;
 
   // 3. Check if script already exists (may have been added externally not via this hook)
-  if (document.querySelector(`script[src="${src}"]`)) return Promise.resolve(new Event("already-loaded"));
+  if (document.querySelector(`script[src="${src}"]`))
+    return Promise.resolve(new Event("already-loaded"));
 
   // 4. Create new script element
   const promise = new Promise<Event>((resolve, reject) => {
     const script = document.createElement("script");
+
     script.src = src;
+    script.async = untrack(() => directAttributes.async);
+    script.defer = untrack(() => directAttributes.defer);
+    script.innerHTML = untrack(() => directAttributes.innerHTML);
+    script.fetchPriority = untrack(() => directAttributes.fetchPriority);
+
+    const type = untrack(() => directAttributes.type);
+    if (type) script.type = type;
+
+    const crossOrigin = untrack(() => directAttributes.crossOrigin);
+    if (crossOrigin) script.crossOrigin = crossOrigin;
+
+    const referrerPolicy = untrack(() => directAttributes.referrerPolicy);
+    if (referrerPolicy) script.referrerPolicy = referrerPolicy;
+
+    const integrity = untrack(() => directAttributes.integrity);
+    if (integrity) script.integrity = integrity;
+
+    const nonce = untrack(() => directAttributes.nonce);
+    if (nonce) script.nonce = nonce;
+
+    const noModule = untrack(() => directAttributes.noModule);
+    if (noModule) script.noModule = noModule;
 
     script.onload = (e) => {
       if (typeof initEvents.onload === "function") {
@@ -39,17 +115,23 @@ const loadScript = async (src: string, attributes: Readonly<ScriptAttributes>) =
     };
 
     script.onerror = (e) => {
+      const event = typeof e === "string" ? new Error(e) : e;
+      const errorEvent = event as ErrorEvent & {
+        currentTarget: HTMLScriptElement;
+        target: Element;
+      };
+
       if (typeof initEvents.onerror === "function") {
-        initEvents.onerror(e as ScriptEvent);
+        initEvents.onerror(errorEvent);
       } else if (typeof initEvents.onError === "function") {
-        initEvents.onError(e as ScriptEvent);
+        initEvents.onError(errorEvent);
       }
 
       reject(e);
     };
 
     // Apply additional attributes if any
-    Object.entries(otherAttributes).forEach(([key, value]) => {
+    Object.entries(restAttributes).forEach(([key, value]) => {
       script.setAttribute(key, value);
     });