Add development setup using Webpack (#14)

* Add webpack dev setup * Configure eslint for dev setup * Add to changelog
digitalocean · Jun 10, 2022 · bc2b3a0 · bc2b3a0
1 parent 12ef229
commit bc2b3a0
Show file tree

Hide file tree

Showing 11 changed files with 5,154 additions and 124 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,12 @@ module.exports = {
                 jest: true,
             },
         },
+        {
+            files: 'dev/client.js',
+            env: {
+                browser: true,
+            },
+        },
     ],
     rules: {
         'space-before-function-paren': [
@@ -162,6 +168,15 @@ module.exports = {
                 array: false,
             },
         ],
+        'import/no-extraneous-dependencies': [
+            'error',
+            {
+                devDependencies: [
+                    '**/*.test.js',
+                    'dev/**/*.js',
+                ],
+            },
+        ],
         'jsdoc/require-returns-description': 'off',
         'jsdoc/tag-lines': 'off',
         'jsdoc/no-undefined-types': [

diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ node_modules/
 vendor/prismjs/
 jsdoc/
 coverage/
+dev/dist/
diff --git a/.npmignore b/.npmignore
@@ -4,6 +4,9 @@
 # Exclude all tests (though we do include the fixtures as demo content)
 *.test.js
 
+# Exclude all development files
+dev/
+
 # Exclude the vendored PrismJS files
 vendor/prismjs/
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ Each list item should be prefixed with `(patch)` or `(minor)` or `(major)`.
 See `PUBLISH.md` for instructions on how to publish a new version.
 -->
 
+- (patch) Add development setup using Webpack
 - (minor) Add support for embedding CanIUse data
 - (minor) Add support for embedding Glitch projects
 

diff --git a/dev/client.html b/dev/client.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--
+Copyright 2022 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0" />
+    <title>do-markdownit</title>
+    <style>
+        html,
+        body {
+            padding: 0;
+            margin: 0;
+        }
+
+        #app {
+            display: flex;
+            flex-direction: column;
+        }
+
+        #textbox,
+        #output {
+            padding: 1rem;
+            margin: 0;
+        }
+
+        #textbox {
+            border: none;
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        #output {
+            overflow: auto;
+        }
+
+        @media only screen and (min-width: 768px) {
+            #app {
+                display: flex;
+                flex-flow: row nowrap;
+            }
+
+            #textbox,
+            #output {
+                flex-basis: 50%;
+            }
+        }
+    </style>
+</head>
+<body>
+<div id="app">
+    <textarea id="textbox"><%= text %></textarea>
+    <div id="output"><%= out %></div>
+</div>
+</body>
+</html>
diff --git a/dev/client.js b/dev/client.js
@@ -0,0 +1,38 @@
+/*
+Copyright 2022 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+const render = require('./render');
+
+document.addEventListener('DOMContentLoaded', () => {
+    const textbox = document.getElementById('textbox');
+    const output = document.getElementById('output');
+
+    /**
+     * Handle the textbox being updated.
+     * Resizes that textbox to match the input, renders the input to HTML.
+     */
+    const update = () => {
+        textbox.style.overflowY = 'hidden';
+        textbox.style.height = 'auto';
+        textbox.style.height = `${textbox.scrollHeight}px`;
+        output.innerHTML = render(textbox.value);
+    };
+
+    textbox.addEventListener('input', update);
+    update();
+});
diff --git a/dev/render.js b/dev/render.js
@@ -0,0 +1,45 @@
+/*
+Copyright 2022 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+const md = require('markdown-it')({
+    langPrefix: '',
+    linkify: true,
+    typographer: true,
+}).use(require('..'), {
+    fence_environment: {
+        allowedEnvironments: [ 'local', 'second', 'third', 'fourth', 'fifth' ],
+    },
+    fence_classes: {
+        allowedClasses: [
+            'prefixed', 'line_numbers', 'command', 'super_user', 'custom_prefix',
+            ...[ 'local', 'second', 'third', 'fourth', 'fifth' ].map(env => `environment-${env}`),
+        ],
+    },
+    callout: {
+        allowedClasses: [ 'note', 'warning', 'info', 'draft' ],
+    },
+});
+
+/**
+ * Render a markdown string to HTML, using standard options for testing.
+ * Designed to be used with fixtures/full-input.md to generate/test fixtures/full-output.html
+ *
+ * @param {string} text Markdown string to render to HTML.
+ * @returns {string}
+ */
+module.exports = text => md.render(text);
diff --git a/dev/webpack.config.js b/dev/webpack.config.js
@@ -0,0 +1,42 @@
+/*
+Copyright 2022 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const fs = require('fs');
+const render = require('./render');
+
+const text = fs.readFileSync(path.resolve(__dirname, '../fixtures/full-input.md'), 'utf8');
+
+module.exports = {
+    mode: 'development',
+    entry: path.resolve(__dirname, './client.js'),
+    output: {
+        path: path.resolve(__dirname, './dist'),
+        filename: 'client.js',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: path.resolve(__dirname, './client.html'),
+            templateParameters: {
+                text: text.replace(/</g, '&lt;').replace(/>/g, '&gt;'),
+                out: render(text),
+            },
+        }),
+    ],
+};
diff --git a/index.test.js b/index.test.js
@@ -18,33 +18,14 @@ limitations under the License.
 
 const fs = require('fs');
 const path = require('path');
+const render = require('./dev/render');
 
 const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'full-input.md'), 'utf8');
 const output = fs.readFileSync(path.join(__dirname, 'fixtures', 'full-output.html'), 'utf8');
 
 it('imports, loads and renders properly', () => {
-    // Create a new instance, testing the options the plugins support
-    const md = require('markdown-it')({
-        langPrefix: '',
-        linkify: true,
-        typographer: true,
-    }).use(require('.'), {
-        fence_environment: {
-            allowedEnvironments: [ 'local', 'second', 'third', 'fourth', 'fifth' ],
-        },
-        fence_classes: {
-            allowedClasses: [
-                'prefixed', 'line_numbers', 'command', 'super_user', 'custom_prefix',
-                ...[ 'local', 'second', 'third', 'fourth', 'fifth' ].map(env => `environment-${env}`),
-            ],
-        },
-        callout: {
-            allowedClasses: [ 'note', 'warning', 'info', 'draft' ],
-        },
-    });
-
     // Render and check output
-    const rendered = md.render(input);
+    const rendered = render(input);
     // fs.writeFileSync(path.join(__dirname, 'fixtures', 'full-output.html'), rendered);
     expect(rendered).toBe(output);
 });