feat(csv-demo-webpack): split usages by packages

adaltas · Nov 19, 2021 · 214c759 · 214c759
1 parent 48c94d4
commit 214c759
Show file tree

Hide file tree

Showing 25 changed files with 410 additions and 134 deletions.
diff --git a/demo/browser/iife/csv.html b/demo/browser/iife/csv.html
@@ -73,9 +73,7 @@ <h1>CSV demo</h1>
             // Generate 20 records
             .generate(generateOptions)
             // Transform CSV data into records
-            .pipe(csv.parse({
-              delimiter: '|'
-            }))
+            .pipe(csv.parse(parseOptions))
             // Transform each value into uppercase
             .pipe(csv.transform(transform.handler))
             // Convert objects into a stream

diff --git a/demo/webpack/.gitignore b/demo/webpack/.gitignore
@@ -1 +1 @@
-/dist/main.js
+/dist/*.js
diff --git a/demo/webpack/dist/csv.html b/demo/webpack/dist/csv.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv` webpack demonstration</title>
+    <script src="./csv.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/csv_sync.html b/demo/webpack/dist/csv_sync.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv` webpack demonstration</title>
+    <script src="./csv_sync.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/generate.html b/demo/webpack/dist/generate.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv-generate` webpack demonstration</title>
+    <script src="./generate.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/generate_sync.html b/demo/webpack/dist/generate_sync.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv-generate` webpack demonstration</title>
+    <script src="./generate_sync.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/index.html b/demo/webpack/dist/index.html
@@ -2,10 +2,36 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.17.20"></script>
+    <title>CSV webpack demonstration</title>
   </head>
   <body>
-    <script src="./main.js"></script>
+    <ul>
+    <ul>
+      <li>
+        <a href="./csv.html">CSV</a>
+        -
+        <a href="./csv_sync.html">sync</a>
+      </li>
+      <li>
+        <a href="./generate.html">CSV generate</a>
+        -
+        <a href="./generate_sync.html">sync</a>
+      </li>
+      <li>
+        <a href="./parse.html">CSV parse</a>
+        -
+        <a href="./parse_sync.html">sync</a>
+      </li>
+      <li>
+        <a href="./transform.html">Stream transform</a>
+        -
+        <a href="./transform_sync.html">sync</a>
+      </li>
+      <li>
+        <a href="./stringify.html">CSV stringify</a>
+        -
+        <a href="./stringify_sync.html">sync</a>
+      </li>
+    </ul>
   </body>
 </html>
diff --git a/demo/webpack/dist/parse.html b/demo/webpack/dist/parse.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv-parse` webpack demonstration</title>
+    <script src="./parse.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/parse_sync.html b/demo/webpack/dist/parse_sync.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv-parse` webpack demonstration</title>
+    <script src="./parse_sync.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/stringify.html b/demo/webpack/dist/stringify.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv-stringify` webpack demonstration</title>
+    <script src="./stringify.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/stringify_sync.html b/demo/webpack/dist/stringify_sync.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `csv-stringify` webpack demonstration</title>
+    <script src="./stringify_sync.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/transform.html b/demo/webpack/dist/transform.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `stream-transform` webpack demonstration</title>
+    <script src="./transform.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/dist/transform_sync.html b/demo/webpack/dist/transform_sync.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Package `stream-transform` webpack demonstration</title>
+    <script src="./transform_sync.js"></script>
+  </head>
+  <body>
+    <button id="run" type="button">run</button>
+    <pre><code id="output">...waiting...</code></pre>
+  </body>
+</html>
diff --git a/demo/webpack/src/csv.js b/demo/webpack/src/csv.js
@@ -0,0 +1,38 @@
+
+import * as csv from 'csv/browser/esm/index.js';
+
+window.onload = () => {
+  const runEl = document.getElementById('run');
+  const outputEl = document.getElementById('output');
+  runEl.onclick = (e) => {
+    // Run the pipeline
+    csv
+    // Generate 20 records
+    .generate({
+      delimiter: '|',
+      length: 10
+    })
+    // Transform CSV data into records
+    .pipe(csv.parse({
+      delimiter: '|'
+    }))
+    // Transform each value into uppercase
+    .pipe(csv.transform( (record) => {
+      record.push(record.shift());
+      return record;
+    }))
+    // Convert objects into a stream
+    .pipe(csv.stringify({
+      quoted: true
+    }))
+    // Print the CSV stream to stdout
+    .on('readable', function () {
+      let chunck; while(chunck = this.read()){
+        outputEl.innerHTML = outputEl.innerHTML + chunck.toString()
+      }
+    })
+    .on('error', function (err) {
+      outputEl.innerHTML = 'Error: ' + err.message;
+    });
+  };
+};
diff --git a/demo/webpack/src/csv_sync.js b/demo/webpack/src/csv_sync.js
@@ -0,0 +1,29 @@
+
+import * as csv from 'csv/browser/esm/sync.js';
+
+window.onload = () => {
+  const runEl = document.getElementById('run');
+  const outputEl = document.getElementById('output');
+  runEl.onclick = (e) => {
+    try{
+      // Run the pipeline
+      const input = csv.generate({
+        delimiter: '|',
+        length: 10
+      });
+      const rawRecords = csv.parse(input, {
+        delimiter: '|'
+      });
+      const refinedRecords = csv.transform(rawRecords, (record) => {
+        record.push(record.shift());
+        return record;
+      });
+      const output = csv.stringify(refinedRecords, {
+        quoted: true
+      });
+      outputEl.innerHTML = output;
+    }catch(err){
+      outputEl.innerHTML = 'Error: ' + err.message;
+    }
+  };
+};
diff --git a/demo/webpack/src/generate.js b/demo/webpack/src/generate.js
@@ -0,0 +1,15 @@
+
+import {generate} from 'csv-generate/browser/esm/index.js';
+
+window.onload = () => {
+  const runEl = document.getElementById('run');
+  const outputEl = document.getElementById('output');
+  runEl.onclick = (e) => {
+    generate({
+      objectMode: true,
+      length: 2
+    }, (err, records) => {
+      outputEl.innerHTML = JSON.stringify(records, null, 2);
+    });
+  };
+};
diff --git a/demo/webpack/src/generate_sync.js b/demo/webpack/src/generate_sync.js
@@ -0,0 +1,14 @@
+
+import {generate} from 'csv-generate/browser/esm/sync.js';
+
+window.onload = () => {
+  const runEl = document.getElementById('run');
+  const outputEl = document.getElementById('output');
+  runEl.onclick = (e) => {
+    const records = generate({
+      objectMode: true,
+      length: 2
+    });
+    outputEl.innerHTML = JSON.stringify(records, null, 2);
+  };
+};