build for ESM and CJS (#18)

* use es6 syntax for private variables * upgrade dependencies * run prettier * fix component registering * compile for both ESM and UMD * update documentation * improve TS checks
Freezystem · Dec 3, 2023 · 32231d6 · 32231d6
1 parent fe524db
commit 32231d6
Show file tree

Hide file tree

Showing 17 changed files with 15,267 additions and 15,052 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc b/.eslintrc
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -1,26 +1,26 @@
 name: MJBarChart Publish
 
 on:
-  release:
-    types: [released]
+    release:
+        types: [released]
 
 jobs:
-  deploy:
-    runs-on: ubuntu-latest 
-    permissions: 
-      contents: read
-      packages: write 
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node and NPM
-        uses: actions/setup-node@v2
-        with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
-      - name: Install and Build
-        run: npm ci
-      - name: Publish to NPM
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    deploy:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup Node and NPM
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  registry-url: "https://registry.npmjs.org"
+            - name: Install and Build
+              run: npm ci
+            - name: Publish to NPM
+              run: npm publish --access public
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -3,29 +3,28 @@ name: MJBarChart Test
 on: push
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
+    build:
+        runs-on: ubuntu-latest
 
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node and NPM
-        uses: actions/setup-node@v2
-        with:
-          node-version: '20.x'
-          cache: 'npm'
-      - name: Install and Build
-        run: npm ci
-      - name: Test
-        run: npm test
-      - name: Generate Changelog
-        run: git log --oneline $(git describe --tags --abbrev=0)..HEAD >> CHANGELOG.txt
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        if: ${{ startsWith(github.ref, 'refs/tags/') }}
-        with:
-          body_path: CHANGELOG.txt
-          draft: true
-          files: |
-            lib/index.js
-            LICENSE
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup Node and NPM
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: "npm"
+            - name: Install and Build
+              run: npm ci
+            - name: Test
+              run: npm test
+            - name: Prettier
+              run: npm run prettier
+            - name: Generate Changelog
+              run: git log --oneline $(git describe --tags --abbrev=0)..HEAD >> CHANGELOG.txt
+            - name: Release
+              uses: softprops/action-gh-release@v1
+              if: ${{ startsWith(github.ref, 'refs/tags/') }}
+              with:
+                  body_path: CHANGELOG.txt
+                  draft: true
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 *.log
 index.html
-lib
+build
 node_modules
 .parcel-cache
diff --git a/.mjmlconfig b/.mjmlconfig
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,10 @@
 {
-  "printWidth": 100,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "all"
+	"$schema": "https://json.schemastore.org/prettierrc",
+	"semi": true,
+	"trailingComma": "es5",
+	"singleQuote": false,
+	"useTabs": true,
+	"tabWidth": 4,
+	"printWidth": 100,
+	"bracketSpacing": true
 }
diff --git a/README.md b/README.md
@@ -12,28 +12,47 @@ Then add the package to your `.mjmlconfig` file:
 
 ```json
 {
-  "packages": [
-    "mjml-bar-chart/lib/index.js"
-  ]
+	"packages": ["mjml-bar-chart/build/index.js"]
 }
 ```
 
+Or import it and manually register the plugin.
+
+with **ESM**:
+
+```ecmascript 6
+import { registerComponent } from "mjml-core";
+import MjBarChart from "@freezystem/mjml-bar-chart";
+
+registerComponent(MjBarChart);
+```
+
+with **CJS**:
+
+```ecmascript 6
+const { registerComponent } = require("mjml-core");
+const MjBarChart = require("@freezystem/mjml-bar-chart");
+
+registerComponent(MjBarChart);
+```
+
 You can now use the `mjml-bar-chart` component in your MJML templates:
 
-```xml
+```mjml
 <mjml>
-  <mj-body>
-    <mj-section>
-      <mj-column>
-        <mj-bar-chart
-          title="Sum of Requests by Department"
-          dataset-labels="January,February,March" 
-          datasets="33 14 27,18 66 42,7 15 21"
-          groups="Support,Sales,Tech"
-          colors="#d8f3dc,#95d5b2,#52b788"/>
-      </mj-column>
-    </mj-section>
-  </mj-body>
+	<mj-body>
+		<mj-section>
+			<mj-column>
+				<mj-bar-chart
+					title="Sum of Requests by Department"
+					dataset-labels="January,February,March"
+					datasets="[[33,14,27],[18,66,42],[7,15,21]]"
+					groups="support,sales,tech"
+					colors="#d8f3dc,#95d5b2,#52b788"
+				/>
+			</mj-column>
+		</mj-section>
+	</mj-body>
 </mjml>
 ```
 
@@ -43,16 +62,16 @@ Yay, you're all set !
 
 ## Customize
 
-| attribute         | required | default   | description                                                                  |
-| :---              | :---:    | :---:     | :---                                                                         |
-| `title`           | ✖️        | `null`    | Chart title, if null will not display                                        |
-| `dataset-labels`  | ✔️        | `null`    | Comma separated labels of each dataset                                       |
-| `datasets`        | ✔️        | `null`    | Comma separated values of each dataset, must contain space separted integers |
-| `groups`          | ✔️        | `null`    | Comma separated data group names                                             |
-| `colors`          | ✔️        | `null`    | Comma separated CSS colors of each group                                     |
-| `axis-color`      | ✖️        | `#d4d4d4` | CSS color of axis and scale numbers                                          |
-| `height`          | ✖️        | `200`     | Chart height in pixel                                                        |
-| `bar-width`       | ✖️        | `30`      | Bar width in pixel                                                           |
-| `separator-width` | ✖️        | `30`      | Separator width in pixel between datasets                                    |
-| `step-count`      | ✖️        | `5`       | Step number on the chart scale, below 2 no steps will be displayed           |
-| `show-values`     | ✖️        | `true`    | Whether or not it should display values above each bar                       |
+| attribute         | required |  default  | description                                                        |
+| :---------------- | :------: | :-------: | :----------------------------------------------------------------- |
+| `title`           |    ✖️    |  `null`   | Chart title, if null will not display                              |
+| `dataset-labels`  |    ✔️    |  `null`   | Comma separated labels of each dataset                             |
+| `datasets`        |    ✔️    |  `null`   | Valid JSON array of same length integer array                      |
+| `groups`          |    ✔️    |  `null`   | Comma separated data group names                                   |
+| `colors`          |    ✔️    |  `null`   | Comma separated CSS colors of each group                           |
+| `axis-color`      |    ✖️    | `#d4d4d4` | CSS color of axis and scale numbers                                |
+| `height`          |    ✖️    |   `200`   | Chart height in pixel                                              |
+| `bar-width`       |    ✖️    |   `30`    | Bar width in pixel                                                 |
+| `separator-width` |    ✖️    |   `30`    | Separator width in pixel between datasets                          |
+| `step-count`      |    ✖️    |    `5`    | Step number on the chart scale, below 2 no steps will be displayed |
+| `show-values`     |    ✖️    |  `true`   | Whether or not it should display values above each bar             |
diff --git a/index.mjml b/index.mjml