Exclude external dependencies jQuery and js-cookie from the bunde; use npm run build for bundling a production build; fix deprecated warnings.

2019-05-06 02:03:44 +02:00 · 2019-05-06 02:03:44 +02:00 · 3c986d645a
parent 174e0d9af2
commit 3c986d645a
8 changed files with 57 additions and 378 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -9,4 +9,4 @@ steps:
  - name: build
    image: node:12
    commands:
-      - npm run build-debug
+      - npm run build
--- a/dist/bundle.js
+++ b/dist/bundle.js
--- a/dist/uhr.js
+++ b/dist/uhr.js
--- a/index.html
+++ b/index.html
@ -39,9 +39,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
        integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
        crossorigin="anonymous"></script>
-    <script type="text/javascript" src="dist/bundle.js"></script>
-    <!--<script type="text/javascript" src="dist/libs.min.js"></script>-->
-    <!--<script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script>-->
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
+    <script type="text/javascript" src="dist/uhr.js"></script>
    <script type="text/javascript">
        function go(url) {
            window.location = url;
@ -51,10 +50,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </head>
 <body style="padding:0;margin:0;">
 <div id="uhr"></div>
-<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a
-        onclick="go('info/index.html')" href="#">Read more!</a></p>
+<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a
+    href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a
+    onclick="go('info/index.html')" href="#">Read more!</a></p>
 <script type="text/javascript">
-    (function($) {
+    (function ($) {
        var width = $(window).width();
        var height = $(window).height();
        var size = Math.min(width, height) + 'px';
--- a/info/index.html
+++ b/info/index.html
@ -31,8 +31,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
        integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
        crossorigin="anonymous"></script>
-    <script type="text/javascript" src="../dist/bundle.js"></script>
-    <!--<script type="text/javascript" src="../dist/jquery.uhr.base.min.js"></script>-->
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
+    <script type="text/javascript" src="../dist/uhr.js"></script>
    <script type="text/javascript">
        function go(url) {
            window.location = url;
@ -83,16 +83,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

 <h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
 <ul>
-    <li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.1.0)</li>
-    <li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden
+    <li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 3.4.1)</li>
+    <li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.12.1) mit folgenden
        Komponenten:
        <ul>
-            <li>core</li>
            <li>widget</li>
        </ul>
    </li>
-    <li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version
-        1.4.0)
+    <li><a href="https://github.com/js-cookie/js-cookie/releases">js-cookie</a> (getestet mit Version
+        2.2.0)
    </li>
 </ul>
 <h3 id="include-in-html">Einbinden in HTML<a href="#toc" class="toclink">Zum Inhalt</a></h3>
@ -117,8 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        data-name="Blau" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="dist/uhr-pink.min.css" data-class="pink"
        data-name="Pink" /&gt;
-        &lt;script type="text/javascript" src="dist/libs.min.js"&gt;&lt;/script&gt;
-        &lt;script type="text/javascript" src="dist/jquery.uhr.complete.min.js"&gt;&lt;/script&gt;</code>
+        &lt;script type="text/javascript" src="dist/uhr.js"&gt;&lt;/script&gt;</code>
 </p>

 <p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die
--- a/package.json
+++ b/package.json
@ -23,7 +23,8 @@
    ],
    "license": "GPL-3.0",
    "scripts": {
-        "build-debug": "webpack -d"
+        "build-debug": "webpack -d",
+        "build": "webpack"
    },
    "dependencies": {
        "jquery": "3.4.1",
--- a/src/uhr.ts
+++ b/src/uhr.ts
@ -182,8 +182,7 @@ export class Uhr {
            e.after(controlpanel);
            controlpanel.hide();
            const configlink = $(`<a class="uhr-configlink" id="uhr-configlink${this.widgetInstance.uuid}"></a>`);
-            // FIXME deprecated!?
-            configlink.on('click', () => this.toggleConfigScreen());
+            configlink.on({click: () => this.toggleConfigScreen()});
            e.after(configlink);
        }
    };
@ -191,8 +190,7 @@ export class Uhr {
    private wireFunctionality(): void {
        // on/off switch
        const toggleSwitch = $(`#uhr-onoffswitch-checkbox${this.widgetInstance.uuid}`);
-        // FIXME deprecated!?
-        toggleSwitch.on('click', () => this.toggle());
+        toggleSwitch.on({click: () => this.toggle()});
        let status = this.getCookie('uhr-status');
        if (status === undefined || this.widgetInstance.options.force) {
            status = this.widgetInstance.options.status;
@ -206,12 +204,13 @@ export class Uhr {

        // time mode switch
        const modeSwitch = $(`#uhr-modeswitch-checkbox${this.widgetInstance.uuid}`);
-        // FIXME deprecated!?
-        modeSwitch.on('click', () => {
-            if (this.widgetInstance.options.mode === 'seconds') {
-                this.setMode('normal');
-            } else {
-                this.setMode('seconds');
+        modeSwitch.on({
+            click: () => {
+                if (this.widgetInstance.options.mode === 'seconds') {
+                    this.setMode('normal');
+                } else {
+                    this.setMode('seconds');
+                }
            }
        });

@ -228,10 +227,11 @@ export class Uhr {

        // language chooser
        const languageChooser = $(`#uhr-languagechooser${this.widgetInstance.uuid}`);
-        // FIXME deprecated!?
-        languageChooser.on('change', () => {
-            const languageKey = $(`#uhr-languagechooser${this.widgetInstance.uuid}`).val() as string;
-            this.setLanguage(languageKey);
+        languageChooser.on({
+            change: () => {
+                const languageKey = $(`#uhr-languagechooser${this.widgetInstance.uuid}`).val() as string;
+                this.setLanguage(languageKey);
+            }
        });
        let selectedLayout = this.getCookie('uhr-language');
        if (selectedLayout === undefined || this.widgetInstance.options.force) {
@ -254,10 +254,11 @@ export class Uhr {

        // theme chooser
        const themeChooser = $(`#uhr-themechooser${this.widgetInstance.uuid}`);
-        // FIXME deprecated!?
-        themeChooser.on('change', () => {
-            const themeKey = $(`#uhr-themechooser${this.widgetInstance.uuid}`).val() as string;
-            this.setTheme(themeKey);
+        themeChooser.on({
+            change: () => {
+                const themeKey = $(`#uhr-themechooser${this.widgetInstance.uuid}`).val() as string;
+                this.setTheme(themeKey);
+            }
        });
        let selectedTheme = this.getCookie('uhr-theme');
        if (selectedTheme === undefined || this.widgetInstance.options.force) {
@ -273,17 +274,18 @@ export class Uhr {
        this.widgetInstance.options.theme = '';
        this.setTheme(selectedTheme);
        if (this.widgetInstance.options.autoresize) {
-            // FIXME deprecated!?
-            $(window).on('resize', () => {
-                const $e = this.widgetInstance.element;
-                const $parent = $e.parent();
-                const $window = $(window);
-                const parentWidth = $parent.width();
-                const parentHeight = $parent.height();
-                const windowWidth = $window.width();
-                const windowHeight = $window.height();
-                const size = `${Math.min(parentWidth, parentHeight, windowWidth, windowHeight)}px`;
-                this.setWidth(size);
+            $(window).on({
+                resize: () => {
+                    const $e: JQuery<HTMLElement> = this.widgetInstance.element;
+                    const $parent: JQuery<HTMLElement> = $e.parent();
+                    const $window: JQuery<Window> = $(window);
+                    const parentWidth: number = $parent.width();
+                    const parentHeight: number = $parent.height();
+                    const windowWidth: number = $window.width();
+                    const windowHeight: number = $window.height();
+                    const size: string = `${Math.min(parentWidth, parentHeight, windowWidth, windowHeight)}px`;
+                    this.setWidth(size);
+                }
            });
        }
    }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -6,10 +6,10 @@ const path = require('path');

 module.exports = {
    entry: [
-        './src/index.ts',
-        './node_modules/jquery/dist/jquery.js'
+        './src/index.ts'
    ],
-    devtool: 'inline-source-map',
+    // devtool: 'inline-source-map',
+    mode: 'production',
    module: {
        rules: [
            {
@ -28,7 +28,12 @@ module.exports = {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
-        filename: 'bundle.js',
+        filename: 'uhr.js',
+        library: 'uhr',
        path: path.resolve(__dirname, 'dist')
+    },
+    externals: {
+        jquery: 'jQuery',
+        'js-cookie': 'Cookies'
    }
 };