@solid-primitives/script-loader - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

dist/index.d.ts

@@ -1,19 +0,26 @@
-import { Accessor } from 'solid-js';
+import { ComponentProps, Accessor } from 'solid-js';
 
+type ScriptProps = Omit<ComponentProps<"script">, "src" | "textContent"> & {
+    /** URL or source of the script to load. */
+    src: string | Accessor<string>;
+};
 /**
  * Creates a convenient script loader utility
  *
- * @param string URL or source of the script to load.
- * @param type Type value to put in the script attribute.
- * @param function Callback to trigger onLoad.
- * @param function callback on error.
- * @returns
+ * @param props The props to spread to the script element.
+ * The `src` prop is required and will be used to set the `src` or `textContent` attribute. It can be a string or an accessor.
+ * @returns The script element that was created. (will be undefined in SSR)
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/script-loader#createScriptLoader
+ *
+ * @example
+ * createScriptLoader({
+ *  src: "https://example.com/script.js",
+ *  async onLoad() {
+ *    // do your stuff...
+ *  }
+ * })
  */
-declare const createScriptLoader: (opts: {
-    src: string | Accessor<string>;
-    type?: string;
-    onload?: () => void;
-    onerror?: () => void;
-}) => [script: HTMLScriptElement | undefined, remove: () => void];
+declare function createScriptLoader(props: ScriptProps): HTMLScriptElement | undefined;
 
-export { createScriptLoader };
+export { ScriptProps, createScriptLoader };

dist/index.js

@@ -1,12 +0,12 @@
-import { createEffect, onCleanup } from 'solid-js';
+import { splitProps, createRenderEffect, onCleanup } from 'solid-js';
+import { spread } from 'solid-js/web';
 
 // src/index.ts
-var createScriptLoader = (opts) => {
+var OMITTED_PROPS = ["src"];
+function createScriptLoader(props) {
   const script = document.createElement("script");
-  opts.type && (script.type = opts.type);
-  opts.onload && script.addEventListener("load", opts.onload);
-  opts.onerror && script.addEventListener("error", opts.onerror);
-  const remove = () => document.head.contains(script) && document.head.removeChild(script);
-  const load = () => {
-    const src = typeof opts.src === "string" ? opts.src : opts.src();
+  const [local, scriptProps] = splitProps(props, OMITTED_PROPS);
+  spread(script, scriptProps, false, true);
+  createRenderEffect(() => {
+    const src = typeof local.src === "string" ? local.src : local.src();
     const prop = /^(https?:|\w[\.\w-_%]+|)\//.test(src) ? "src" : "textContent";
@@ -17,9 +17,7 @@ if (script[prop] !== src) {
     }
-  };
-  load();
-  createEffect(load, false);
-  onCleanup(remove);
-  return [script, remove];
-};
+  });
+  onCleanup(() => document.head.contains(script) && document.head.removeChild(script));
+  return script;
+}
 
 export { createScriptLoader };

dist/server.js

 import 'solid-js';
+import 'solid-js/web';
 
 // src/index.ts
-var createScriptLoader = (opts) => {
+function createScriptLoader(props) {
   {
-    return [
-      void 0,
-      () => {
-      }
-    ];
+    return void 0;
   }
-};
+}
 
 export { createScriptLoader };

package.json

 {
   "name": "@solid-primitives/script-loader",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "Primitive to load scripts dynamically",
   "author": "Alex Lohr <[e-mail]>",
+  "contributors": [
+    "Damian Tarnawski <[e-mail]>"
+  ],
   "license": "MIT",
@@ -7,0 +10,0 @@ "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/script",

README.md

@@ -20,2 +20,4 @@ <p>
 yarn add @solid-primitives/script-loader
+# or
+pnpm add @solid-primitives/script-loader
 ```
@@ -25,16 +27,15 @@
 
+createScriptLoader expects a props object with a `src` property. All the other props will be spread to the script element.
+
+The `src` prop is required and will be used to set the `src` or `textContent` attribute. It can be a string or an accessor.
+
 ```ts
-const [script: HTMLScriptElement, remove: () => void] = createScriptLoader({
-  src: string | Accessor<string>, // url or js source
-  type?: string,
-  onload?: () => void,
-  onerror?: () => void
-});
+import { createScriptLoader } from "@solid-primitives/script-loader";
 
 // For example, to use recaptcha:
 createScriptLoader({
-  src: 'https://www.google.com/recaptcha/enterprise.js?render=my_token'
-  onload: async () => {
+  src: "https://www.google.com/recaptcha/enterprise.js?render=my_token",
+  async onLoad() {
     await grecaptcha.enterprise.ready();
-    const token = await grecaptcha.enterprise.execute('my_token', {action: 'login'});
+    const token = await grecaptcha.enterprise.execute("my_token", { action: "login" });
     // do your stuff...
@@ -45,9 +46,21 @@ }
 // or pinterest embeds:
-const pinterestEmbedScript = '!function(a,b,c){var d,e,f;d="PIN_"+~~((new Date).getTime()/864e5),...';
 createScriptLoader({
-  src: pinterestEmbedScript,
-  onload: () => window?.PinUtils?.build()
+  src: '!function(a,b,c){var d,e,f;d="PIN_"+~~((new Date).getTime()/864e5),...',
+  onLoad() {
+    window?.PinUtils?.build();
+  }
 });
 ```
 
+## Definition
+
+```ts
+function createScriptLoader(props: ScriptProps): HTMLScriptElement | undefined; // script element with be undefined only on the server
+
+type ScriptProps = Omit<ComponentProps<"script">, "src" | "textContent"> & {
+  /** URL or source of the script to load. */
+  src: string | Accessor<string>;
+};
+```
+
 ## Demo
@@ -54,0 +67,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8389

increased by11.42%

Number of lines in readme file

70

increased by22.81%

Worsened metrics

Lines of code

84

decreased by-1.18%

No dependency changes