create-codepen - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.d.ts

@@ -1,20 +0,6 @@
-interface DomOptions extends Record<string, unknown> {
+interface CodePenStyleOptions {
     /**
-     * @default 0
-     */
-    "theme-id"?: string | number;
-    "slug-hash"?: string;
-    user?: string;
-    name?: string;
-    href?: string;
-    /**
-     * @description one of or a set of "html" | "css" | "js" | "result"
-     * @default "result"
-     */
-    "default-tab"?: string;
-    /**
      * @default 300
      */
     height?: number | string;
-    animations?: "run" | "stop-after-5";
     /**
@@ -48,6 +34,24 @@ * @default none
     "link-logo-color"?: string;
+    /**
+     * Additional class name
+     */
     class?: string;
     "custom-css-url"?: string;
-    preview?: "true" | "none";
+}
+interface CodePenDomOptions extends CodePenStyleOptions, Record<string, unknown> {
     /**
+     * Id of theme
+     * @default 0
+     */
+    "theme-id"?: string | number;
+    "slug-hash"?: string;
+    user?: string;
+    /**
+     * @description one of or a set of "html" | "css" | "js" | "result"
+     * @default "result"
+     */
+    "default-tab"?: string;
+    animations?: "run" | "stop-after-5";
+    preview?: "true" | "false";
+    /**
      * @default 1
@@ -59,2 +63,10 @@ */
     /**
+     * @default "false"
+     */
+    open?: "true" | "false";
+    /**
+     * @deprecated use "slug-hash" instead
+     */
+    href?: string;
+    /**
      * @deprecated use "animations" instead
@@ -67,4 +79,6 @@ */
     type?: string;
+    /** @private */
+    name?: string;
 }
-interface PrefillOptions {
+interface CodePenPrefillOptions {
     title?: string;
@@ -78,6 +92,6 @@ description?: string;
 }
-interface APIOptions extends DomOptions {
+interface CodePenOptions extends Omit<CodePenDomOptions, "name" | "type" | "href" | "safe"> {
     /** @private */
     data?: string;
-    prefill?: PrefillOptions;
+    prefill?: CodePenPrefillOptions;
     /**
@@ -89,7 +103,8 @@ * @default "false"
 
-declare const renderCodePen: (selector: string | HTMLElement, options: APIOptions) => void;
+declare const renderCodePen: (options: CodePenOptions, selector?: string | HTMLElement) => void;
 
-declare const loadCodePens: (selector?: string) => void;
+declare const loadCodePens: (selector?: string, options?: CodePenDomOptions) => void;
+declare const openCodePens: (selector?: string) => void;
 
-export { APIOptions, DomOptions, PrefillOptions, loadCodePens, renderCodePen };
+export { CodePenDomOptions, CodePenOptions, CodePenPrefillOptions, CodePenStyleOptions, loadCodePens, openCodePens, renderCodePen };
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "create-codepen",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Create CodePen with API",
@@ -36,4 +36,12 @@ "keywords": [
   ],
+  "packageManager": "pnpm@8.6.0",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "5.59.8",
+    "@typescript-eslint/parser": "5.59.8",
     "esbuild": "^0.17.19",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.8",
     "rollup": "^3.23.0",
@@ -47,4 +55,8 @@ "rollup-plugin-dts": "^5.3.0",
     "build": "rollup -c rollup.config.ts --configPlugin esbuild",
-    "dev": "vite dev"
+    "dev": "vite dev",
+    "lint": "pnpm lint:prettier --write && pnpm lint:eslint --fix",
+    "lint:check": "pnpm lint:prettier && pnpm lint:eslint",
+    "lint:eslint": "eslint . --ext .js,.ts,.vue",
+    "lint:prettier": "prettier --check ."
   }
 }

README.md

@@ -1,3 +0,5 @@
-# A library creating codepen with api.
+# create-codepen
 
+A library creating codepen with api.
+
 ## loadCodePens
@@ -47,2 +49,30 @@
 
+## openCodePens
+
+Open codepen in new window
+
+```ts
+export const openCodePens: (selector?: string) => void;
+```
+
+Example:
+
+```html
+<p
+  class="code-pen-open"
+  data-theme-id="light"
+  data-default-tab="js,result"
+  data-user="Mamboleoo"
+  data-slug-hash="XWJPxpZ"
+  data-pen-title="Walkers - How to"
+>
+  See the Pen Walkers - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
+</p>
+<script type="module">
+  import { loadCodePens } from "https://unpkg.com/create-codepen";
+
+  loadCodePens(".code-pen-open");
+</script>
+```
+
 ## renderCodePen
@@ -52,22 +82,10 @@
 
+If a valid selector is provided, the codepen will be rendered inside selector element. Otherwise it will be rendered in new window.
+
 ```ts
-interface DomOptions extends Record<string, unknown> {
+interface CodePenStyleOptions {
   /**
-   * @default 0
-   */
-  "theme-id"?: string | number;
-  "slug-hash"?: string;
-  user?: string;
-  name?: string;
-  href?: string;
-  /**
-   * @description one of or a set of "html" | "css" | "js" | "result"
-   * @default "result"
-   */
-  "default-tab"?: string;
-  /**
    * @default 300
    */
   height?: number | string;
-  animations?: "run" | "stop-after-5";
   /**
@@ -101,6 +119,26 @@ * @default none
   "link-logo-color"?: string;
+  /**
+   * Additional class name
+   */
   class?: string;
   "custom-css-url"?: string;
-  preview?: "true" | "none";
+}
+interface CodePenDomOptions
+  extends CodePenStyleOptions,
+    Record<string, unknown> {
   /**
+   * Id of theme
+   * @default 0
+   */
+  "theme-id"?: string | number;
+  "slug-hash"?: string;
+  user?: string;
+  /**
+   * @description one of or a set of "html" | "css" | "js" | "result"
+   * @default "result"
+   */
+  "default-tab"?: string;
+  animations?: "run" | "stop-after-5";
+  preview?: "true" | "false";
+  /**
    * @default 1
@@ -112,2 +150,6 @@ */
   /**
+   * @deprecated use "slug-hash" instead
+   */
+  href?: string;
+  /**
    * @deprecated use "animations" instead
@@ -120,4 +162,6 @@ */
   type?: string;
+  /** @private */
+  name?: string;
 }
-interface PrefillOptions {
+interface CodePenPrefillOptions {
   title?: string;
@@ -131,6 +175,7 @@ description?: string;
 }
-interface APIOptions extends DomOptions {
+interface CodePenOptions
+  extends Omit<CodePenDomOptions, "name" | "type" | "href" | "safe"> {
   /** @private */
   data?: string;
-  prefill?: PrefillOptions;
+  prefill?: CodePenPrefillOptions;
   /**
@@ -143,4 +188,4 @@ * @default "false"
 export const renderCodePen: (
-  selector: string | HTMLElement,
-  options: APIOptions
+  options: CodePenOptions,
+  selector?: string | HTMLElement
 ) => void;
@@ -151,32 +196,43 @@ ```
 
-```ts
-import { loadCodePens } from "create-codepen";
+```html
+<div class="api"></div>
+<div class="prefill"></div>
+<button class="codepen-api-open">Open</button>
 
-renderCodePen(".api", {
-  "slug-hash": "XWJPxpZ",
-  height: 265,
-  "theme-id": "light",
-  "default-tab": "js,result",
-  user: "Mamboleoo",
-  title: "Walkers - How to",
-});
+<script type="module">
+  import { renderCodePen } from "https://unpkg.com/create-codepen";
 
-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: `\
+  // render codepen in class="api"
+  renderCodePen(
+    {
+      "slug-hash": "XWJPxpZ",
+      height: 265,
+      "theme-id": "light",
+      "default-tab": "js,result",
+      user: "Mamboleoo",
+      title: "Walkers - How to",
+    },
+    ".api"
+  );
+
+  // render codepen in class="prefill"
+  renderCodePen(
+    {
+      "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: `\
+        css: `\
 $gray: #ccc;
@@ -199,3 +255,3 @@ body {
 `,
-    js: `\
+        js: `\
 class Welcome extends React.Component {
@@ -216,6 +272,67 @@ render() {
 `,
-    css_pre_processor: "scss",
-    js_pre_processor: "babel",
-  },
-});
+        css_pre_processor: "scss",
+        js_pre_processor: "babel",
+      },
+    },
+    ".prefill"
+  );
+
+  document.querySelector(".codepen-api-open").addEventListener("click", () => {
+    renderCodePen({
+      "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>
 ```

No alert changes

Improved metrics

Total package byte prevSize

59708

increased by17.64%

Lines of code

136

increased by14.29%

Number of lines in readme file

329

increased by55.19%

Worsened metrics

Dev dependency count

13

increased by116.67%

No dependency changes