Merge pull request ghiscoding#164 from ghiscoding/feat/drop-legacy-script

feat!: drop standalone legacy browser <script> & `window` object usage

Author: ghiscoding

README.md

@@ -24,7 +24,7 @@ This project was originally created by Stephen Liberty and `excel-builder-vanill
 
 ### Comparison to other similar libraries
 
-Excel-builder-vanilla is at the minimum 7-13x times smaller than the most popular libraries (we used `Bundlephobia` to compare), excel-builder-vanilla is 19Kb gzip while [XLSX](https://bundlephobia.com/package/xlsx) is 136Kb and [ExcelJS](https://bundlephobia.com/package/exceljs) is 251Kb gzip. The reason as to why it's much smaller is very simple and relates to these 2 major differences: 
+Excel-builder-vanilla is at the minimum 7-13x times smaller than the most popular libraries (we used `Bundlephobia` to compare), excel-builder-vanilla is 19Kb gzip while [XLSX](https://bundlephobia.com/package/xlsx) is 136Kb and [ExcelJS](https://bundlephobia.com/package/exceljs) is 251Kb gzip. The reason as to why it's much smaller is very simple and relates to these 2 major differences:
 - excel-builder-vanilla is ESM-Only (tree shakable) and all other libraries are still just offering CJS (CommonJS) which increases their download/install size (not tree shakable)
 - excel-builder-vanilla is only offering Excel export (writer) but without any reading capabilities making the project very lightweight
 
@@ -43,12 +43,7 @@ You can also take a look at the "[Used by](#used-by)" section below to see real
 npm install excel-builder-vanilla
 ```
 
-The project offers 2 different build types, choose the best one depending on your use case
-1. **ESM**: to `import from` (_**preferred**_)
-2. **IIFE**: standalone script which provides `ExcelBuilder` on the `window` object
-
-> [!NOTE]
-> ESM import is the preferred approach and IIFE might actually be removed in the future to lower download size even further.
+The project is now only offered as an ESM Only build
 
 ```ts
 // ESM (preferred) - npm install
@@ -57,7 +52,7 @@ import { createWorksheet } from 'excel-builder-vanilla';
 // IIFE - CDN
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/excel-builder.iife.js"></script>
 <script>
-  const worksheet = ExcelBuilder.createWorksheet(); // or window.ExcelBuilder.createWorksheet();
+  const worksheet = ExcelBuilder.createWorksheet();
 </script>
 ```
 
@@ -110,6 +105,17 @@ The project now has only 1 small dependency which is [fflate](https://github.com
 
 This modernization provides a huge decrease in the final build size, with only 1 dependency, and also offers better performance 🚀
 
+## Major Changes
+
+### version 3.0
+- initial release (forked from original `excel-builder` library)
+
+### version 4.0
+- build as ESM-Only and drop CJS (CommonJS) build (aka `require()`)
+
+### version 5.0
+- drop the legacy IIFE build and the use of `window` object (typically used when loading as the legacy `<script>`).
+
 ### Used by
 
 This fork was created mostly to support Tree Shaking (ESM), provide TS Types and finally to update all project dependencies. It is used by a few other Open Source libraries that I also maintain and require Excel export:

docs/README.md

@@ -20,7 +20,7 @@ or from CDN with standalone script (IIFE)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/excel-builder.iife.js"></script>
 <script>
-  const worksheet = ExcelBuilder.createWorksheet(); // or window.ExcelBuilder.createWorksheet();
+  const worksheet = ExcelBuilder.createWorksheet();
 </script>
 ```
 

packages/demo/src/examples/example-standalone-iife.html

@@ -19,29 +19,15 @@ <h5>CDN</h5>
       <a href="https://www.jsdelivr.com/" target="__blank">jsDelivr</a>
       graciously provide CDNs for many JavaScript libraries including Excel-Builder-Vanilla. Just use the following CDN links.
     </p>
-    <p>
-      The project now ships as ESM-Only, if you still wish to use the legacy CommonJS (CJS) format with <code>require()</code>, then use
-      previous 3.x version.
-    </p>
 
     <div style="background: #f7f7f7; padding: 10px">
       <pre>
-&lt;!-- (IIFE Standalone Script) Latest compiled and minified JavaScript --&gt;
-&lt;script type=&quot;module&quot; src=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected]/dist/excel-builder.iife.js</span>&quot;&gt;&lt;/script&gt;
+&lt;script <span style="color:#207eb1">type</span>=&quot;<span style="color:#f06605">module</span>&quot;&gt;
+  // ESM Module import
+  <span style="color:#cf222e">import</span> excelBuilderVanilla <span style="color:#cf222e">from</span> <span style="color:#0a3069">'https://cdn.jsdelivr.net/npm/[email protected]/+esm'</span>;
+&lt;/script&gt;
+</pre>
     </div>
-
-    <quote>
-      <b>Note:</b> the <code>excel-builder.iife.js</code> is the only dist bundle providing the <code>ExcelBuilder</code> on the
-      <code>window</code> object.
-    </quote>
-    <br />
-    <br />
-    <quote>
-      You can find a Standalone Script (IIFE) example at the location
-      <a href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example-standalone-iife.html"
-        >examples/example-standalone-iife.html</a
-      >
-    </quote>
   </section>
 
   <section>
@@ -59,16 +45,19 @@ <h5>
   <p>The library provides both CommonJS or ESM, see the example below:</p>
   <div style="background: #f7f7f7; padding: 10px">
     <pre>
-// CommonJS
-const { createWorkbook, Workbook } = require('excel-builder-vanilla');
-
 // ESM
-import { createWorkbook } from 'excel-builder-vanilla';
+<span style="color:#cf222e">import</span> { createWorkbook } <span style="color:#cf222e">from</span> <span style="color:#00265f">'excel-builder-vanilla'</span>;
 
 // use it
-const artistWorkbook = createWorkbook(); // or new Workbook();
-const albumList = artistWorkbook.createWorksheet({ name: 'Artists' });
-albumList.setData(this.originalData);
+const artistWorkbook = <span style="color:#ce8601">createWorksheet</span>(); // or new Workbook();
+const albumList = <span style="color:#009db2">artistWorkbook</span>.<span style="color:#ce8601">createWorksheet</span>({ <span style="color:#003c44">name</span>: <span style="color:#aa8202">'Artists'</span> })</span>;
+<span style="color:#009db2">albumList</span>.<span style="color:#ce8601">setData</span>(this.originalData);
 </pre>
+
+    <h5>Legacy Versions</h5>
+    <p>
+      The project now ships as ESM-Only, if you still wish to use the legacy <code>&lt;script&gt;</code> standalone IIFE Script on the
+      <code>window</code> object, then use the previous 4.x version.
+    </p>
   </div>
 </div>

packages/demo/src/getting-started.html

@@ -14,22 +14,12 @@ Available [**Live demo**](https://ghiscoding.github.io/excel-builder-vanilla/) w
 npm install excel-builder-vanilla
 ```
 
-The project offers 2 different bundle types, choose the best one depending on your use case: 
-1. ESM: to `import from` (preferred)
-2. IIFE: standalone script with `ExcelBuilder` available on the `window` object
-
-> [!NOTE]
-> ESM import is the preferred approach and IIFE might actually be removed in the future to lower download size even further.
+The project only offers 1 bundle type
+- ESM: to `import from` (preferred)
 
 ```ts
 // ESM - npm install
 import { createWorksheet } from 'excel-builder-vanilla';
-
-// IIFE - CDN
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/excel-builder.iife.js"></script>
-<script>
-  const worksheet = ExcelBuilder.createWorksheet();
-</script>
 ```
 
 ### Basic Usage
@@ -58,3 +48,14 @@ downloadExcelFile(artistWorkbook, 'Artist WB.xlsx');
 ## LICENSE
 
 [MIT License](https://github.com/ghiscoding/excel-builder-vanilla/blob/main/LICENSE.md)
+
+## Major Changes
+
+### version 3.0
+- initial release (forked from original `excel-builder` library)
+
+### version 4.0
+- build as ESM-Only and drop CJS (CommonJS) build (aka `require()`)
+
+### version 5.0
+- drop the legacy IIFE build and the use of `window` object (typically used when loading as the legacy `<script>`).

packages/excel-builder-vanilla/README.md

@@ -8,14 +8,13 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'iife'],
+      formats: ['es'],
       name: 'ExcelBuilder',
       fileName: format => {
         switch (format) {
           case 'es':
-            return 'index.js';
           default:
-            return `excel-builder.${format}.js`;
+            return 'index.js';
         }
       },
     },