feat: ✨ add pyscript provider

SushiWaUmai · Jun 1, 2022 · 0f8b811 · 0f8b811
1 parent ea27327
commit 0f8b811
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,6 @@
 Use [PyScript](https://pyscript.net/) together with [Solid.js](https://www.solidjs.com/).
 
 ## Getting Started
-Note: This library is currently heavily under development and only supports solidjs using vite.
 
 ### Installation
 Install pyscript-solidjs using npm:
@@ -15,27 +14,25 @@ yarn add pyscript-solidjs
 pnpm install pyscript-solidjs
 ```
 
-Add the following lines in the vite entrypoint html file.
-Note: A pyscript provider is coming soon.
-
-```html
-<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
-<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
-```
-
 ### Usage
 Simple Hello World in pyscript-solid.
 
 ```tsx
 import type { Component } from "solid-js";
-import { PyScript, PyEnv } from "pyscript-solid";
+import { PyScript, PyScriptProvider } from "pyscript-solid";
 
 const App: Component = () => {
-  return <PyScript>print("Hello World")</PyScript>;
+  return (
+    <PyScriptProvider>
+      <PyScript>print("Hello World")</PyScript>
+    </PyScriptProvider>
+  );
 };
 
 export default App;
 ```
 
+You can find more examples under the [`examples`](./examples) directory.
+
 ## License
 This library is lilcensed under the [MIT license](./LICENSE).
diff --git a/examples/file-path/index.html b/examples/file-path/index.html
@@ -5,9 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>PyScript</title>
-    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
-    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
+    <title>Example Filepath</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/examples/file-path/src/App.tsx b/examples/file-path/src/App.tsx
@@ -1,8 +1,12 @@
-import { PyScript } from "pyscript-solid";
+import { PyScript, PyScriptProvider } from "pyscript-solid";
 import type { Component } from "solid-js";
 
 const App: Component = () => {
-  return <PyScript src="hello.py" />;
+  return (
+    <PyScriptProvider>
+      <PyScript src="hello.py" />
+    </PyScriptProvider>
+  );
 };
 
 export default App;
diff --git a/examples/hello-world/index.html b/examples/hello-world/index.html
@@ -5,9 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>PyScript</title>
-    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
-    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
+    <title>Example Hello World</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/examples/hello-world/src/App.tsx b/examples/hello-world/src/App.tsx
@@ -1,8 +1,12 @@
 import type { Component } from "solid-js";
-import { PyScript } from "pyscript-solid";
+import { PyScript, PyScriptProvider } from "pyscript-solid";
 
 const App: Component = () => {
-  return <PyScript>print("Hello World")</PyScript>;
+  return (
+    <PyScriptProvider>
+      <PyScript>print("Hello World")</PyScript>
+    </PyScriptProvider>
+  );
 };
 
 export default App;
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -2,7 +2,6 @@
 Use [PyScript](https://pyscript.net/) together with [Solid.js](https://www.solidjs.com/).
 
 ## Getting Started
-Note: This library is currently heavily under development and only supports solidjs using vite.
 
 ### Installation
 Install pyscript-solidjs using npm:
@@ -15,27 +14,22 @@ yarn add pyscript-solidjs
 pnpm install pyscript-solidjs
 ```
 
-Add the following lines in the vite entrypoint html file.
-Note: A pyscript provider is coming soon.
-
-```html
-<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
-<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
-```
-
 ### Usage
 Simple Hello World in pyscript-solid.
 
 ```tsx
 import type { Component } from "solid-js";
-import { PyScript, PyEnv } from "pyscript-solid";
+import { PyScript, PyScriptProvider } from "pyscript-solid";
 
 const App: Component = () => {
-  return <PyScript>print("Hello World")</PyScript>;
+  return (
+    <PyScriptProvider>
+      <PyScript>print("Hello World")</PyScript>
+    </PyScriptProvider>
+  );
 };
 
 export default App;
 ```
 
-## License
-This library is lilcensed under the [MIT license](./LICENSE).
+You can find more examples under the [`examples`](../examples) directory.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -40,7 +40,9 @@
     "vitest": "^0.13.0"
   },
   "dependencies": {
-    "solid-js": "^1.4.3"
+    "@solid-primitives/script-loader": "^1.1.0",
+    "solid-js": "^1.4.3",
+    "solid-meta": "^0.27.5"
   },
   "files": [
     "dist"

diff --git a/packages/core/src/components/PyScriptProvider.tsx b/packages/core/src/components/PyScriptProvider.tsx
@@ -0,0 +1,30 @@
+import type { JSX } from "solid-js";
+import { Link, MetaProvider } from "solid-meta";
+import { Component } from "solid-js";
+import { createScriptLoader } from "@solid-primitives/script-loader";
+
+interface PyScriptProviderProperties {
+  children: JSX.Element;
+  jsSource?: string;
+  cssSource?: string;
+}
+
+export const PyScriptProvider: Component<PyScriptProviderProperties> = (
+  props,
+) => {
+  createScriptLoader({
+    src: props.jsSource || "https://pyscript.net/alpha/pyscript.js",
+  });
+
+  return (
+    <>
+      <MetaProvider>
+        <Link
+          rel="stylesheet"
+          href={props.cssSource || "https://pyscript.net/alpha/pyscript.css"}
+        />
+      </MetaProvider>
+      {props.children}
+    </>
+  );
+};
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -6,4 +6,5 @@ export * from "./PyInputBox";
 export * from "./PyRegisterWidget";
 export * from "./PyRepl";
 export * from "./PyScript";
+export * from "./PyScriptProvider";
 export * from "./PyTitle";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml