feat: add distributed package and example

sachinkiranti · May 2, 2022 · 58ce264 · 58ce264
1 parent 01308b6
commit 58ce264
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 .vscode/
 coverage/
-dist/
+build/
 node_modules/
diff --git a/dist/demo.html b/dist/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Textual String Manipulation Demo</title>
+</head>
+<body>
+    <h1>Textual String Manipulation Demo</h1>
+    <p>Try the given button to count the words and characters for the given input.</p>
+
+    <textarea name="textStr" id="textStr" cols="30" rows="10"></textarea>
+    <br>
+    <span id="info-message"></span>
+    <div>
+        <button type="button" id="btn-count">Words Count</button>
+    </div>
+
+    <!-- Load jQuery -->
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="./textual.min.js"></script>
+
+    <script>
+        $(function () {
+            $('#btn-count').on('click', function () {
+                var strText = $('textarea[name=textStr]').val();
+
+                $('#info-message').html(
+                    'The word count is : ' + strText.wordCount() +
+                    ' and the character count is : ' + strText.charCount()
+                )
+
+            })
+        });
+    </script>
+</body>
+</html>
diff --git a/dist/textual.min.js b/dist/textual.min.js
diff --git a/package.json b/package.json
@@ -7,13 +7,13 @@
     "url": "https://github.com/sachinkiranti/textual.git"
   },
   "scripts": {
-    "clean": "rimraf dist && rimraf coverage",
+    "clean": "rimraf build && rimraf coverage",
     "build": "npm run compile && npm run copy:html && npm run bundle && npm run minify",
     "compile": "tsc",
     "copy:html": "cpx src/**.html dist",
     "test": "karma start",
     "bundle": "rollup -c",
-    "minify": "uglifyjs dist/textual-bundle.js --output dist/textual.min.js --source-map \"filename='dist/textual.min.js.map',url='textual.min.js.map',content='dist/textual.js.map'\""
+    "minify": "uglifyjs build/textual-bundle.js --output dist/textual.min.js"
   },
   "keywords": [],
   "author": "Sachin Kiranti <[email protected]>",

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,11 +2,11 @@ import babel from 'rollup-plugin-babel';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 
 export default {
-    input: 'dist/textual.js', // Starting point for bundling
+    input: 'build/textual.js', // Starting point for bundling
 
     // Output options for the generated bundle
     output: {
-        file: 'dist/textual-bundle.js',
+        file: 'build/textual-bundle.js',
         format: 'iife',
         sourcemap: true
     },

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "rootDir": "src",
-    "outDir": "dist",
+    "outDir": "build",
     "target": "es2015",
     "module": "es2015",
     "moduleResolution": "node",