Feat/implement (#1)

* Add emotion dependency

* Replace name throughout

* Install dependencies

* Update version, description

* Bundle and build

* Add tests

* Validate that the API actually functions

* Move publishConfig into package.json per documentation here https://github.com/release-it/release-it/blob/master/docs/npm.md\#public-scoped-packages

* Update links

.release-it.json

@@ -2,9 +2,6 @@
   "github": {
     "release": true
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "plugins": {
     "release-it-plugin-esm-bundle": {}
   }

README.md

@@ -1,35 +1,47 @@
-# autopublish-template
+# emotion
 
-[![npm version](https://img.shields.io/npm/v/@esm-bundle/autopublish-template.svg?style=flat)](https://www.npmjs.com/package/@esm-bundle/autopublish-template) [![build status](https://travis-ci.com/esm-bundle/autopublish-template.svg?branch=master)](https://travis-ci.com/esm-bundle/autopublish-template) [![](https://data.jsdelivr.com/v1/package/npm/@esm-bundle/autopublish-template/badge)](https://www.jsdelivr.com/package/npm/@esm-bundle/autopublish-template)
+[![npm version](https://img.shields.io/npm/v/@esm-bundle/emotion.svg?style=flat)](https://www.npmjs.com/package/@esm-bundle/emotion) [![build status](https://travis-ci.com/esm-bundle/emotion.svg?branch=master)](https://travis-ci.com/esm-bundle/emotion) [![](https://data.jsdelivr.com/v1/package/npm/@esm-bundle/emotion/badge)](https://www.jsdelivr.com/package/npm/@esm-bundle/emotion)
 
 ["What is this" blog post](https://medium.com/@joeldenning/an-esm-bundle-for-any-npm-package-5f850db0e04d)
 
-[Instructions for creating a new esm-bundle repo](https://github.com/esm-bundle/new-repo-instructions)
+Upstream repo at https://github.com/emotion-js/emotion.
 
-A repo that tests automatic detection of upstream publishes and the publishing of `@esm-bundle` versions of them.
+## JS Delivr
 
-Upstream repo at https://github.com/joeldenning/autopublish-template.
+### Production
 
-## JS Delivr
+https://cdn.jsdelivr.net/npm/@esm-bundle/emotion/esm/emotion.min.js
+
+https://cdn.jsdelivr.net/npm/@esm-bundle/emotion/system/emotion.min.js
+
+### Development
 
-https://cdn.jsdelivr.net/npm/@esm-bundle/autopublish-template/esm/index.js
+https://cdn.jsdelivr.net/npm/@esm-bundle/emotion/esm/emotion.js
 
-https://cdn.jsdelivr.net/npm/@esm-bundle/autopublish-template/system/index.js
+https://cdn.jsdelivr.net/npm/@esm-bundle/emotion/system/emotion.js
 
 ## Unpkg
 
-https://unpkg.com/@esm-bundle/autopublish-template/esm/index.js
+### Production
+
+https://unpkg.com/@esm-bundle/emotion/esm/emotion.min.js
+
+https://unpkg.com/@esm-bundle/emotion/system/emotion.min.js
+
+### Development
+
+https://unpkg.com/@esm-bundle/emotion/esm/emotion.js
 
-https://unpkg.com/@esm-bundle/autopublish-template/system/index.js
+https://unpkg.com/@esm-bundle/emotion/system/emotion.js
 
 ## Npm
 
 ```sh
-npm install --save autopublish-template@npm:@esm-bundle/autopublish-template
+npm install --save emotion@npm:@esm-bundle/emotion
 ```
 
 ## Yarn
 
 ```sh
-yarn add autopublish-template@npm:@esm-bundle/autopublish-template
+yarn add emotion@npm:@esm-bundle/emotion
 ```

browser-test/test.js

@@ -1,9 +1,41 @@
-describe("@esm-bundle/autopublish-template", () => {
-  it("can load the ESM bundle", () => {
-    return import("/base/esm/index.js");
-  });
+describe("@esm-bundle/emotion", () => {
+  [
+    ["development ESM", import("/base/esm/emotion.js")],
+    ["production ESM ", import("/base/esm/emotion.min.js")],
+    ["development System.register", System.import("/base/system/emotion.js")],
+    [
+      "production System.register",
+      System.import("/base/system/emotion.min.js"),
+    ],
+  ].forEach(([moduleType, importFn]) => {
+    it(`can load the ${moduleType} bundle`, () => {
+      return importFn.then((module) => {
+        expect(module).toBeDefined();
+        const { css, cx } = module;
+        expect(css).toBeDefined();
+        expect(cx).toBeDefined();
+      });
+    });
+
+    it("the API generates classNames", () => {
+      return System.import("/base/system/emotion.js").then(({ css, cx }) => {
+        // Basic test that matches simple example https://emotion.sh/docs/introduction#framework-agnostic
+        const color = "white",
+          base = css`
+            border-radius: 4px;
+            padding: 32px;
+            &:hover {
+              color: ${color};
+            }
+          `,
+          extra = css`
+            background-color: hotpink;
+            font-size: 24px;
+          `;
 
-  it("can load the System.register bundle", () => {
-    return System.import("/base/system/index.js");
+        expect(base).toContain("css-");
+        expect(cx(base, extra)).toContain("css-");
+      });
+    });
   });
 });

node-test/main.test.mjs

@@ -1,5 +1,13 @@
-describe("@esm-bundle/autopublish-template", () => {
-  it("can load the esm bundle without dying", () => {
-    return import("../esm/index.js");
+describe("@esm-bundle/emotion", () => {
+  it("can load the development esm bundle without dying", async () => {
+    const { css, cx } = await import("../esm/emotion.js");
+    expect(css).not.to.equal(undefined);
+    expect(cx).not.to.equal(undefined);
+  });
+
+  it("can load the production esm bundle without dying", async () => {
+    const { css, cx } = await import("../esm/emotion.min.js");
+    expect(css).not.to.equal(undefined);
+    expect(cx).not.to.equal(undefined);
   });
 });

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@esm-bundle/autopublish-template",
-  "version": "20.0.0",
-  "description": "Repo to test esm-bundle's automatic publishing",
-  "main": "index.js",
-  "module": "esm/index.js",
+  "name": "@esm-bundle/emotion",
+  "version": "0.0.0-unpublished.0",
+  "description": "Repo to autopublish an esm-bundle of emotion",
+  "main": "esm/emotion.min.js",
+  "module": "esm/emotion.min.js",
   "type": "module",
   "scripts": {
     "test": "yarn build && concurrently -n w: 'yarn:test:*'",
@@ -27,16 +27,22 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/esm-bundle/autopublish-template.git"
+    "url": "git+https://github.com/esm-bundle/emotion.git"
   },
   "author": "",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/esm-bundle/autopublish-template/issues"
+    "url": "https://github.com/esm-bundle/emotion/issues"
   },
-  "homepage": "https://github.com/esm-bundle/autopublish-template#readme",
+  "homepage": "https://github.com/esm-bundle/emotion#readme",
   "devDependencies": {
-    "autopublish-template": "20.0.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "create-emotion": "^10.0.27",
+    "emotion": "^10.0.27",
     "esm-bundle-scripts": "1.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

rollup.config.js

@@ -1,17 +1,35 @@
-import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
 import { terser } from "rollup-plugin-terser";
 
-function createConfig(format) {
+function createConfig(format, options = {}) {
   const dir = format === "module" ? "esm" : format;
+  const { min = false } = options;
+
   return {
-    input: require.resolve("autopublish-template"),
+    input: `src/index.js`,
     output: {
-      file: `${dir}/index.js`,
+      file: `${dir}/emotion${min ? ".min" : ""}.js`,
       sourcemap: true,
       format,
     },
-    plugins: [commonjs(), terser()],
+    plugins: [
+      nodeResolve(),
+      replace({
+        values: {
+          "process.env.NODE_ENV": JSON.stringify(
+            min ? "production" : "development"
+          ),
+        },
+      }),
+      min && terser(),
+    ],
   };
 }
 
-export default [createConfig("module"), createConfig("system")];
+export default [
+  createConfig("module"),
+  createConfig("module", { min: true }),
+  createConfig("system"),
+  createConfig("system", { min: true }),
+];

src/index.js

@@ -0,0 +1 @@
+export * from "emotion/dist/emotion.esm";