feat: add new apis

Mister-Hope · Jun 5, 2023 · a33c6aa · a33c6aa
1 parent 2967724
commit a33c6aa
Show file tree

Hide file tree

Showing 8 changed files with 469 additions and 186 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <p
+      class="codepen"
+      data-height="265"
+      data-theme-id="light"
+      data-default-tab="js,result"
+      data-user="Mamboleoo"
+      data-slug-hash="XWJPxpZ"
+      style="
+        height: 265px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid;
+        margin: 1em 0;
+        padding: 1em;
+      "
+      data-pen-title="Walkers - How to"
+    >
+      <span
+        >See the Pen
+        <a href="https://codepen.io/Mamboleoo/pen/XWJPxpZ"> Walkers - How to</a>
+        by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a
+        >) on <a href="https://codepen.io">CodePen</a>.</span
+      >
+    </p>
+    <div
+      class="codepen"
+      data-prefill='{
+    "title": "React Basics Demo",
+    "description": "Shows how to use React and React DOM to render a module with props onto the page",
+    "tags": ["react", "react-docs-demo"],
+    "html_classes": ["loading", "no-js"],
+    "head": "&lt;meta name=&#x27;viewport&#x27; content=&#x27;width=device-width, initial-scale=1&#x27;&gt;",
+    "stylesheets": "https://unpkg.com/normalize.css@8.0.1/normalize.css",
+    "scripts": ["https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js", "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"]
+  }'
+      style="height: 400px; overflow: auto"
+      data-height="400"
+      data-theme-id="31205"
+      data-default-tab="js,result"
+      data-editable="true"
+    >
+      <pre data-lang="html">
+&lt;div id="root"&gt;&lt;/div&gt;
+  </pre
+      >
+      <pre data-lang="scss">
+$gray: #ccc;
+body {
+  background: $gray;
+  margin: 0;
+  padding: 1rem;
+}
+.module {
+  background: white;
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid #999;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  h1 {
+    margin: 0 0 1rem 0;
+  }
+}
+  </pre
+      >
+      <pre data-lang="babel">
+class Welcome extends React.Component {
+  render() {
+    return &lt;div class="module"&gt;
+      &lt;h1&gt;
+        Hello, {this.props.name}
+      &lt;/h1&gt;
+      &lt;p&gt;It's a good day to build websites.&lt;/p&gt;
+    &lt;/div&gt;;
+  }
+}
+ReactDOM.render(
+  &lt;Welcome name="Chris"&gt;&lt;/Welcome&gt;,
+  document.getElementById('root')
+);
+  </pre
+      >
+    </div>
+    <div class="api"></div>
+    <div class="prefill"></div>
+    <script type="module">
+      import { loadCodePens, renderCodePen } from "./src/index.ts";
+
+      loadCodePens();
+
+      renderCodePen(".api", {
+        "slug-hash": "XWJPxpZ",
+        height: 265,
+        "theme-id": "light",
+        "default-tab": "js,result",
+        user: "Mamboleoo",
+        title: "Walkers - How to",
+      });
+
+      renderCodePen(".prefill", {
+        "default-tab": "js,result",
+        prefill: {
+          title: "React Basics Demo",
+          description:
+            "Shows how to use React and React DOM to render a module with props onto the page",
+          tags: ["react", "react-docs-demo"],
+          html_classes: ["loading", "no-js"],
+          head: '<meta name="viewport" content="width=device-width, initial-scale=1">',
+          stylesheets: "https://unpkg.com/normalize.css@8.0.1/normalize.css",
+          scripts: [
+            "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js",
+          ],
+          html: `\
+<div id="root"></div>
+`,
+          css: `\
+$gray: #ccc;
+body {
+  background: $gray;
+  margin: 0;
+  padding: 1rem;
+}
+.module {
+  background: white;
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid #999;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  h1 {
+    margin: 0 0 1rem 0;
+  }
+}
+`,
+          js: `\
+class Welcome extends React.Component {
+  render() {
+    return <div class="module">
+      <h1>
+        Hello, {this.props.name}
+      </h1>
+      <p>It's a good day to build websites.</p>
+    </div>;
+  }
+}
+ReactDOM.render(
+  <Welcome name="Chris"></Welcome>,
+  document.getElementById('root')
+);
+`,
+          css_pre_processor: "scss",
+          js_pre_processor: "babel",
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -22,13 +22,15 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.ts --configPlugin esbuild"
+    "build": "rollup -c rollup.config.ts --configPlugin esbuild",
+    "dev": "vite dev"
   },
   "devDependencies": {
     "esbuild": "^0.17.19",
     "rollup": "^3.23.0",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-esbuild": "^5.0.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/api.ts b/src/api.ts
@@ -0,0 +1,34 @@
+import { appendFragment, getForm, getIframe } from "./dom.js";
+import { type DomOptions } from "./options.js";
+
+let idIndex = 1;
+
+export const renderCodePen = (
+  selector: string | HTMLElement,
+  options: DomOptions
+) => {
+  const container =
+    typeof selector === "string"
+      ? document.querySelector<HTMLElement>(selector)
+      : selector;
+
+  if (!options.user) options.user = "anon";
+  if (!options.name) options.name = `code-pen-api-${idIndex++}`;
+
+  if (container) {
+    const docFragment = document.createDocumentFragment();
+    let form;
+
+    docFragment.append(getIframe(options));
+
+    if ("prefill" in options) {
+      options.data = JSON.stringify(options.prefill || "{}");
+      form = getForm(options);
+      docFragment.append(form);
+    }
+
+    appendFragment(container, docFragment);
+
+    if (form) form.submit();
+  }
+};