@stackoverflow/stacks 0.74.0 → 1.0.0-beta.0

package/lib/ts/controllers/s-uploader.ts

@@ -1,174 +1,172 @@
-namespace Stacks {
-    interface FilePreview {
-        data?: string | ArrayBuffer;
-        name: string;
-        type: string;
-    };
-
-    export class UploaderController extends Stacks.StacksController {
-        static targets = ["input", "previews", "uploader"];
-        private inputTarget!: HTMLInputElement;
-        private previewsTarget!: HTMLElement;
-        private uploaderTarget!: HTMLElement;
-
-        private boundDragEnter!: any;
-        private boundDragLeave!: any;
-
-        private static readonly FILE_DISPLAY_LIMIT = 10;
-        private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
-
-        connect() {
-            super.connect();
-            this.boundDragEnter = this.handleUploaderActive.bind(this, true);
-            this.boundDragLeave = this.handleUploaderActive.bind(this, false);
-
-            this.inputTarget.addEventListener("dragenter", this.boundDragEnter);
-            this.inputTarget.addEventListener("dragleave", this.boundDragLeave);
+import * as Stacks from "../stacks";
+
+interface FilePreview {
+    data?: string | ArrayBuffer;
+    name: string;
+    type: string;
+};
+
+export class UploaderController extends Stacks.StacksController {
+    static targets = ["input", "previews", "uploader"];
+    private inputTarget!: HTMLInputElement;
+    private previewsTarget!: HTMLElement;
+    private uploaderTarget!: HTMLElement;
+
+    private boundDragEnter!: any;
+    private boundDragLeave!: any;
+
+    private static readonly FILE_DISPLAY_LIMIT = 10;
+    private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
+
+    connect() {
+        super.connect();
+        this.boundDragEnter = this.handleUploaderActive.bind(this, true);
+        this.boundDragLeave = this.handleUploaderActive.bind(this, false);
+
+        this.inputTarget.addEventListener("dragenter", this.boundDragEnter);
+        this.inputTarget.addEventListener("dragleave", this.boundDragLeave);
+    }
+
+    disconnect() {
+        this.inputTarget.removeEventListener("dragenter", this.boundDragEnter);
+        this.inputTarget.removeEventListener("dragleave", this.boundDragLeave);
+        super.disconnect();
+    }
+
+    /**
+     * Handles rendering the file preview state on input change
+     */
+    handleInput() {
+        this.previewsTarget.innerHTML = "";
+
+        if (!this.inputTarget.files) {
+            return;
         }
 
-        disconnect() {
-            this.inputTarget.removeEventListener("dragenter", this.boundDragEnter);
-            this.inputTarget.removeEventListener("dragleave", this.boundDragLeave);
-            super.disconnect();
-        }
-
-        /**
-         * Handles rendering the file preview state on input change
-         */
-        handleInput() {
-            this.previewsTarget.innerHTML = "";
-
-            if (!this.inputTarget.files) {
-                return;
-            }
-
-            const count = this.inputTarget.files.length;
-                this.getDataURLs(this.inputTarget.files, UploaderController.FILE_DISPLAY_LIMIT)
-                    .then((res: FilePreview[]) => {
-                        this.handleVisible(true);
-                        const hasMultipleFiles = res.length > 1;
-
-                        if (hasMultipleFiles) {
-                            let headingElement = document.createElement("div");
-                            headingElement.classList.add("s-uploader--previews-heading");
-                            headingElement.innerText = res.length < count ?
-                                `Showing ${res.length} of ${count} files` : `${count} items`;
-                            this.previewsTarget.appendChild(headingElement);
-                            this.previewsTarget.classList.add("has-multiple");
-                        } else {
-                            this.previewsTarget.classList.remove("has-multiple");
-                        }
-                        res.forEach((file) => this.addFilePreview(file));
-                        this.handleUploaderActive(true);
-                    });
-        }
-
-        /**
-         * Resets the Uploader to initial state
-         */
-        reset() {
-            this.inputTarget.value = '';
-            this.previewsTarget.innerHTML = "";
-            this.handleVisible(false);
+        const count = this.inputTarget.files.length;
+            this.getDataURLs(this.inputTarget.files, UploaderController.FILE_DISPLAY_LIMIT)
+                .then((res: FilePreview[]) => {
+                    this.handleVisible(true);
+                    const hasMultipleFiles = res.length > 1;
+
+                    if (hasMultipleFiles) {
+                        let headingElement = document.createElement("div");
+                        headingElement.classList.add("s-uploader--previews-heading");
+                        headingElement.innerText = res.length < count ?
+                            `Showing ${res.length} of ${count} files` : `${count} items`;
+                        this.previewsTarget.appendChild(headingElement);
+                        this.previewsTarget.classList.add("has-multiple");
+                    } else {
+                        this.previewsTarget.classList.remove("has-multiple");
+                    }
+                    res.forEach((file) => this.addFilePreview(file));
+                    this.handleUploaderActive(true);
+                });
+    }
+
+    /**
+     * Resets the Uploader to initial state
+     */
+    reset() {
+        this.inputTarget.value = '';
+        this.previewsTarget.innerHTML = "";
+        this.handleVisible(false);
+    }
+
+    /**
+     * Set hide/show and disabled state on elements depending on preview state
+     * @param  {boolean} shouldPreview - Uploader is entering a preview state
+     */
+    private handleVisible(shouldPreview: boolean) {
+        const { scope } = this.targets;
+        const hideElements = scope.findAllElements('[data-s-uploader-hide-on-input]');
+        const showElements = scope.findAllElements('[data-s-uploader-show-on-input]');
+        const enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
+
+        if (shouldPreview) {
+            hideElements.map(el => el.classList.add("d-none"));
+            showElements.map(el => el.classList.remove("d-none"));
+            enableElements.map(el => el.removeAttribute("disabled"));
+        } else {
+            hideElements.map(el => el.classList.remove("d-none"));
+            showElements.map(el => el.classList.add("d-none"));
+            enableElements.map(el => el.setAttribute("disabled", "true"))
+            this.handleUploaderActive(false);
         }
-
-        /**
-         * Set hide/show and disabled state on elements depending on preview state
-         * @param  {boolean} shouldPreview - Uploader is entering a preview state
-         */
-        private handleVisible(shouldPreview: boolean) {
-            const { scope } = this.targets;
-            const hideElements = scope.findAllElements('[data-s-uploader-hide-on-input]');
-            const showElements = scope.findAllElements('[data-s-uploader-show-on-input]');
-            const enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
-
-            if (shouldPreview) {
-                hideElements.map(el => el.classList.add("d-none"));
-                showElements.map(el => el.classList.remove("d-none"));
-                enableElements.map(el => el.removeAttribute("disabled"));
-            } else {
-                hideElements.map(el => el.classList.remove("d-none"));
-                showElements.map(el => el.classList.add("d-none"));
-                enableElements.map(el => el.setAttribute("disabled", "true"))
-                this.handleUploaderActive(false);
-            }
+    }
+
+    /**
+     * Adds a DOM element to preview a selected file
+     * @param  {FilePreview} file
+     */
+    private addFilePreview(file: FilePreview) {
+        if (!file) {
+            return;
         }
 
-        /**
-         * Adds a DOM element to preview a selected file
-         * @param  {FilePreview} file
-         */
-        private addFilePreview(file: FilePreview) {
-            if (!file) {
-                return;
-            }
-
-            let previewElement = document.createElement("div");
-            let thumbElement;
-
-            if (file.type.match('image/*') && file.data) {
-                thumbElement = document.createElement("img");
-                thumbElement.src = file.data.toString();
-                thumbElement.alt = file.name;
-            } else {
-                thumbElement = document.createElement("div");
-                thumbElement.innerText = file.name;
-            }
-
-            thumbElement.classList.add("s-uploader--preview-thumbnail");
-            previewElement.appendChild(thumbElement);
-            previewElement.classList.add("s-uploader--preview");
-            previewElement.setAttribute('data-filename', file.name);
-            this.previewsTarget.appendChild(previewElement);
-        }
+        let previewElement = document.createElement("div");
+        let thumbElement;
 
-        /**
-         * Toggles display and disabled state for select elements on valid input
-         * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
-         */
-        private handleUploaderActive(active: boolean) {
-            this.uploaderTarget.classList.toggle("is-active", active);
+        if (file.type.match('image/*') && file.data) {
+            thumbElement = document.createElement("img");
+            thumbElement.src = file.data.toString();
+            thumbElement.alt = file.name;
+        } else {
+            thumbElement = document.createElement("div");
+            thumbElement.innerText = file.name;
         }
 
-        /**
-         * Converts the file data into a data URL
-         * @param  {File} file
-         * @returns an object containing a FilePreview object
-         */
-        private fileToDataURL(file: File): Promise<FilePreview> {
-            var reader = new FileReader();
-            const { name, size, type } = file;
-
-            if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {
-                return new Promise((resolve, reject) => {
-                    reader.onload = evt => {
-                        const res = evt?.target?.result;
-                        if (res) {
-                            resolve({ data: res, name, type });
-                        } else {
-                            reject();
-                        }
+        thumbElement.classList.add("s-uploader--preview-thumbnail");
+        previewElement.appendChild(thumbElement);
+        previewElement.classList.add("s-uploader--preview");
+        previewElement.setAttribute('data-filename', file.name);
+        this.previewsTarget.appendChild(previewElement);
+    }
+
+    /**
+     * Toggles display and disabled state for select elements on valid input
+     * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
+     */
+    private handleUploaderActive(active: boolean) {
+        this.uploaderTarget.classList.toggle("is-active", active);
+    }
+
+    /**
+     * Converts the file data into a data URL
+     * @param  {File} file
+     * @returns an object containing a FilePreview object
+     */
+    private fileToDataURL(file: File): Promise<FilePreview> {
+        var reader = new FileReader();
+        const { name, size, type } = file;
+
+        if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {
+            return new Promise((resolve, reject) => {
+                reader.onload = evt => {
+                    const res = evt?.target?.result;
+                    if (res) {
+                        resolve({ data: res, name, type });
+                    } else {
+                        reject();
                     }
-                    reader.readAsDataURL(file);
-                });
-            } else {
-                return Promise.resolve({ name, type });
-            }
+                }
+                reader.readAsDataURL(file);
+            });
+        } else {
+            return Promise.resolve({ name, type });
         }
-
-        /**
-         * Gets an array of FilePreviews from a FileList
-         * @param  {FileList|[]} files
-         * @returns an array of FilePreview objects from a FileList
-         */
-        private getDataURLs(files: FileList, limit: number): Promise<FilePreview[]> {
-            const promises = Array.from(files)
-                .slice(0, Math.min(limit, files.length))
-                .map(f => this.fileToDataURL(f));
-
-            return Promise.all(promises);
-        }
-    };
-}
-
-Stacks.application.register("s-uploader", Stacks.UploaderController);
+    }
+
+    /**
+     * Gets an array of FilePreviews from a FileList
+     * @param  {FileList|[]} files
+     * @returns an array of FilePreview objects from a FileList
+     */
+    private getDataURLs(files: FileList, limit: number): Promise<FilePreview[]> {
+        const promises = Array.from(files)
+            .slice(0, Math.min(limit, files.length))
+            .map(f => this.fileToDataURL(f));
+
+        return Promise.all(promises);
+    }
+};

package/lib/ts/index.ts

@@ -0,0 +1,20 @@
+import '../css/stacks.less';
+import { ExpandableController, ModalController, PopoverController, TableController, TabListController, TooltipController, UploaderController } from './controllers';
+import { application, StacksApplication } from './stacks';
+
+// register all built-in controllers
+application.register("s-expandable-control", ExpandableController);
+application.register("s-modal", ModalController);
+application.register("s-navigation-tablist", TabListController);
+application.register("s-popover", PopoverController);
+application.register("s-table", TableController);
+application.register("s-tooltip", TooltipController);
+application.register("s-uploader", UploaderController);
+
+// finalize the application to guard our controller namespace
+StacksApplication.finalize();
+
+// export all controllers w/ helpers
+export * from "./controllers";
+// export the entirety of the contents of stacks.ts
+export * from "./stacks";

package/lib/ts/stacks.ts

@@ -1,83 +1,88 @@
-namespace Stacks {
-    class StacksApplication extends Stimulus.Application {
-        load(...definitions: Stimulus.Definition[]): void
-        load(definitions: Stimulus.Definition[]): void
-        load(head: Stimulus.Definition | Stimulus.Definition[], ...rest: Stimulus.Definition[]) {
-            const definitions = Array.isArray(head) ? head : [head, ...rest];
+import * as Stimulus from "stimulus";
 
-            for (const definition of definitions) {
-                var hasPrefix = /^s-/.test(definition.identifier);
-                if (_initializing && !hasPrefix) {
-                    throw "Stacks-created Stimulus controller names must start with \"s-\".";
-                }
-                if (!_initializing && hasPrefix) {
-                    throw "The \"s-\" prefix on Stimulus controller names is reserved for Stacks-created controllers.";
-                }
+export class StacksApplication extends Stimulus.Application {
+    static _initializing = true;
+
+    load(...definitions: Stimulus.Definition[]): void
+    load(definitions: Stimulus.Definition[]): void
+    load(head: Stimulus.Definition | Stimulus.Definition[], ...rest: Stimulus.Definition[]) {
+        const definitions = Array.isArray(head) ? head : [head, ...rest];
+
+        for (const definition of definitions) {
+            var hasPrefix = /^s-/.test(definition.identifier);
+            if (StacksApplication._initializing && !hasPrefix) {
+                throw "Stacks-created Stimulus controller names must start with \"s-\".";
+            }
+            if (!StacksApplication._initializing && hasPrefix) {
+                throw "The \"s-\" prefix on Stimulus controller names is reserved for Stacks-created controllers.";
             }
-            
-            super.load(definitions);
         }
 
-        static start(element?: Element, schema?: Stimulus.Schema): StacksApplication {
-            const application = new StacksApplication(element, schema);
-            application.start();
-            return application;
-        }
+        super.load(definitions);
     }
 
-    export const application: Stimulus.Application = StacksApplication.start();
-    export var _initializing = true;
-    
-    export class StacksController extends Stimulus.Controller {
-        protected getElementData(element: Element, key: string) {
-            return element.getAttribute("data-" + this.identifier + "-" + key);
-        };
-        protected setElementData(element: Element, key: string, value: string) {
-            element.setAttribute("data-" + this.identifier + "-" + key, value);
-        };
-        protected removeElementData(element: Element, key: string) {
-            element.removeAttribute("data-" + this.identifier + "-" + key);
-        };
-        protected triggerEvent<T>(eventName: string, detail?: T, optionalElement?: Element) {
-            const namespacedName = this.identifier + ":" + eventName;
-            var event : CustomEvent<T>;
-            try {
-                event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
-            } catch (ex) {
-                // Internet Explorer
-                event = document.createEvent("CustomEvent");
-                event.initCustomEvent(namespacedName, true, true, detail!);
-            }
-            (optionalElement || this.element).dispatchEvent(event);
-            return event;
-        };
+    static start(element?: Element, schema?: Stimulus.Schema): StacksApplication {
+        const application = new StacksApplication(element, schema);
+        application.start();
+        return application;
     }
 
-    // ControllerDefinition/createController/addController is here to make
-    // it easier to consume Stimulus from ES5 files (without classes)
-    export interface ControllerDefinition {
-        [name: string]: any;
-        targets?: string[];
+    static finalize() {
+        StacksApplication._initializing = false;
     }
-    export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
-        const Controller = controllerDefinition.hasOwnProperty("targets")
-            ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
-            : class Controller extends StacksController {};
+}
 
-        for (var prop in controllerDefinition) {
-            if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
-                Object.defineProperty(
-                    Controller.prototype,
-                    prop,
-                    Object.getOwnPropertyDescriptor(controllerDefinition, prop)!
-                );
-            }
+export const application: Stimulus.Application = StacksApplication.start();
+
+export class StacksController extends Stimulus.Controller {
+    protected getElementData(element: Element, key: string) {
+        return element.getAttribute("data-" + this.identifier + "-" + key);
+    };
+    protected setElementData(element: Element, key: string, value: string) {
+        element.setAttribute("data-" + this.identifier + "-" + key, value);
+    };
+    protected removeElementData(element: Element, key: string) {
+        element.removeAttribute("data-" + this.identifier + "-" + key);
+    };
+    protected triggerEvent<T>(eventName: string, detail?: T, optionalElement?: Element) {
+        const namespacedName = this.identifier + ":" + eventName;
+        var event : CustomEvent<T>;
+        try {
+            event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
+        } catch (ex) {
+            // Internet Explorer
+            event = document.createEvent("CustomEvent");
+            event.initCustomEvent(namespacedName, true, true, detail!);
         }
+        (optionalElement || this.element).dispatchEvent(event);
+        return event;
+    };
+}
 
-        return Controller;
-    }
+// ControllerDefinition/createController/addController is here to make
+// it easier to consume Stimulus from ES5 files (without classes)
+export interface ControllerDefinition {
+    [name: string]: any;
+    targets?: string[];
+}
+export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
+    const Controller = controllerDefinition.hasOwnProperty("targets")
+        ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
+        : class Controller extends StacksController {};
 
-    export function addController(name: string, controller: ControllerDefinition) {
-        application.register(name, createController(controller));
+    for (var prop in controllerDefinition) {
+        if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
+            Object.defineProperty(
+                Controller.prototype,
+                prop,
+                Object.getOwnPropertyDescriptor(controllerDefinition, prop)!
+            );
+        }
     }
+
+    return Controller;
+}
+
+export function addController(name: string, controller: ControllerDefinition) {
+    application.register(name, createController(controller));
 }

package/lib/tsconfig.json

@@ -1,11 +1,13 @@
 {
     "compilerOptions": {
         "strict": true,
-        "typeRoots": ["../node_modules/@types", "../node_modules/@stimulus/core/src"],
         "target": "es5",
-        "lib": ["dom", "es6", "dom.iterable", "scripthost"], // es6 stuff is polyfilled by stimulus
-        "outDir": "../build",
-        "rootDir": "."
+        "lib": ["dom", "es6", "dom.iterable", "scripthost"],  // es6 stuff is polyfilled by stimulus
+        "outDir": "../dist",
+        "sourceMap": true,
+        "moduleResolution": "node",
+        "skipLibCheck": true,
+        "declaration": true
     },
-    "include": ["./ts/**/*.ts"]
-}
+    "include": ["ts/**/*"]
+}

package/package.json

@@ -5,53 +5,69 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "0.74.0",
+  "version": "1.0.0-beta.0",
   "files": [
     "dist",
     "lib"
   ],
+  "main": "./dist/js/stacks.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/css/stacks.css",
+  "less": "./lib/css/stacks.less",
   "unpkg": "dist/css/stacks.min.css",
   "scripts": {
-    "start": "grunt",
-    "build": "grunt build",
+    "start": "concurrently -n w: npm:start:*",
+    "build": "concurrently -n w: npm:build:*",
+    "build:bundle": "webpack --mode=production",
+    "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
+    "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
+    "start:eleventy": "cd ./docs && eleventy --serve",
     "test": "backstop test",
-    "approve": "backstop approve"
+    "approve": "backstop approve",
+    "prepublishOnly": "npm run build",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier --check . --end-of-line auto"
   },
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
+    "@popperjs/core": "^2.11.4",
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^0.12.1",
-    "@highlightjs/cdn-assets": "^11.4.0",
-    "@stackoverflow/stacks-editor": "^0.4.1",
-    "@stackoverflow/stacks-icons": "^2.26.0",
+    "@11ty/eleventy": "^1.0.0",
+    "@highlightjs/cdn-assets": "^11.5.0",
+    "@stackoverflow/stacks-editor": "^0.4.2",
+    "@stackoverflow/stacks-icons": "^2.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
     "backstopjs": "^6.0.4",
+    "concurrently": "^7.1.0",
+    "css-loader": "^6.7.1",
+    "cssnano": "^5.1.7",
     "docsearch.js": "^2.6.3",
-    "eleventy-plugin-highlightjs": "^0.3.0",
-    "eleventy-plugin-markdown-shortcode": "^1.1.0",
+    "eleventy-plugin-highlightjs": "^1.0.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "grunt": "^1.4.1",
-    "grunt-cli": "^1.4.3",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-no-unsanitized": "^4.0.1",
     "grunt-concurrent": "^3.0.0",
-    "grunt-contrib-clean": "^2.0.0",
-    "grunt-contrib-concat": "^2.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-cssmin": "^4.0.0",
-    "grunt-contrib-less": "^3.0.0",
-    "grunt-contrib-uglify": "^5.0.1",
-    "grunt-contrib-watch": "^1.1.0",
-    "grunt-shell": "^3.0.1",
-    "grunt-ts": "^6.0.0-beta.22",
     "jquery": "^3.6.0",
+    "less-loader": "^10.2.0",
     "list.js": "^2.3.1",
+    "markdown-it": "^12.3.2",
+    "mini-css-extract-plugin": "^2.6.0",
     "postcss-less": "^6.0.0",
-    "stylelint": "^14.3.0",
-    "stylelint-config-recommended-less": "^1.0.1",
-    "stylelint-config-standard": "^24.0.0",
-    "stylelint-less": "^1.0.1",
-    "typescript": "^4.5.5"
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.6.2",
+    "stylelint": "^14.6.1",
+    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-standard": "^25.0.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.3",
+    "webpack": "^5.71.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-merge": "^5.8.0"
   },
   "browserslist": [
     "last 2 versions",