diff --git a/package-lock.json b/package-lock.json index da8a4c54d2..4c3bdbc38e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "packages/dgrid2", "xpackages/eclwatch", "packages/esbuild-plugins", - "xpackages/form", + "packages/form", "packages/graph", "packages/html", "packages/layout", @@ -743,6 +743,10 @@ "resolved": "packages/esbuild-plugins", "link": true }, + "node_modules/@hpcc-js/form": { + "resolved": "packages/form", + "link": true + }, "node_modules/@hpcc-js/graph": { "resolved": "packages/graph", "link": true @@ -17305,6 +17309,24 @@ "@esbuild/win32-x64": "0.24.0" } }, + "packages/form": { + "name": "@hpcc-js/form", + "version": "3.0.0", + "license": "Apache-2.0", + "dependencies": { + "@hpcc-js/api": "^3.1.0", + "@hpcc-js/chart": "^3.1.0", + "@hpcc-js/common": "^3.0.0" + }, + "devDependencies": { + "@hpcc-js/esbuild-plugins": "^1.2.0", + "d3-brush": "^1", + "d3-color": "3.1.0", + "d3-drag": "^1", + "d3-scale": "^1", + "d3-selection": "^1" + } + }, "packages/graph": { "name": "@hpcc-js/graph", "version": "3.0.0", diff --git a/package.json b/package.json index dd9adc3ea8..1f4cc04729 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "packages/dgrid2", "xpackages/eclwatch", "packages/esbuild-plugins", - "xpackages/form", + "packages/form", "packages/graph", "packages/html", "packages/layout", diff --git a/packages/composite/.vscode/launch.json b/packages/composite/.vscode/launch.json new file mode 100644 index 0000000000..7c2436335f --- /dev/null +++ b/packages/composite/.vscode/launch.json @@ -0,0 +1,47 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "test-browser", + "type": "msedge", + "request": "launch", + "url": "http://localhost:8888", + "webRoot": "${workspaceFolder}", + "outFiles": [ + "${workspaceFolder}/**/*.js", + "!**/node_modules/**" + ], + }, + { + "name": "test-node", + "type": "node", + "request": "launch", + "runtimeArgs": [ + "run-script", + "test-node" + ], + "runtimeExecutable": "npm", + "skipFiles": [ + "/**" + ], + "outFiles": [ + "${workspaceFolder}/**/*.js", + "!**/node_modules/**" + ], + }, + { + "name": "index.html", + "request": "launch", + "type": "msedge", + "url": "file:///${workspaceFolder}/index.html", + "runtimeArgs": [ + "--disable-web-security" + ], + "webRoot": "${workspaceFolder}", + "outFiles": [ + "${workspaceFolder}/**/*.js", + "!**/node_modules/**" + ] + } + ] +} \ No newline at end of file diff --git a/packages/composite/.vscode/tasks.json b/packages/composite/.vscode/tasks.json index 7fffdb949c..120545d06c 100644 --- a/packages/composite/.vscode/tasks.json +++ b/packages/composite/.vscode/tasks.json @@ -1,20 +1,36 @@ { - // See https://go.microsoft.com/fwlink/?LinkId=733558 - // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { + "label": "gen-types-watch", "type": "npm", - "script": "compile-umd-watch", - "group": { - "kind": "build", - "isDefault": true - }, + "script": "gen-types-watch", "problemMatcher": [ "$tsc-watch" ], - "label": "npm: compile-umd-watch", - "detail": "tsc --module umd --outDir ./lib-umd --watch" + "presentation": { + "group": "group-build" + } + }, + { + "label": "bundle-watch", + "type": "npm", + "script": "bundle-watch", + "problemMatcher": [], + "presentation": { + "group": "group-build" + } + }, + { + "label": "build", + "dependsOn": [ + "gen-types-watch", + "bundle-watch", + ], + "group": { + "kind": "build", + "isDefault": true + } } ] } \ No newline at end of file diff --git a/packages/composite/esbuild.js b/packages/composite/esbuild.js new file mode 100644 index 0000000000..67b91a9988 --- /dev/null +++ b/packages/composite/esbuild.js @@ -0,0 +1,29 @@ +import { browserTpl } from "@hpcc-js/esbuild-plugins"; +import pkg from "./package.json" with { type: "json" }; + +// config --- +await Promise.all([ + browserTpl("src/index.ts", "dist/index", { + keepNames: true, + alias: { + "d3-array": "@hpcc-js/common", + "d3-brush": "@hpcc-js/common", + "d3-collection": "@hpcc-js/common", + "d3-color": "@hpcc-js/common", + "d3-dispatch": "@hpcc-js/common", + "d3-drag": "@hpcc-js/common", + "d3-dsv": "@hpcc-js/common", + "d3-ease": "@hpcc-js/common", + "d3-format": "@hpcc-js/common", + "d3-interpolate": "@hpcc-js/common", + "d3-scale": "@hpcc-js/common", + "d3-selection": "@hpcc-js/common", + "d3-time-format": "@hpcc-js/common", + "d3-transition": "@hpcc-js/common", + "d3-zoom": "@hpcc-js/common" + }, + external: [ + ...Object.keys(pkg.dependencies), + ] + }) +]); diff --git a/packages/composite/index.html b/packages/composite/index.html new file mode 100644 index 0000000000..cecdb20587 --- /dev/null +++ b/packages/composite/index.html @@ -0,0 +1,100 @@ + + + + + Home + + + + + + + +

ESM Quick Test

+
+ + + + + \ No newline at end of file diff --git a/packages/composite/package.json b/packages/composite/package.json index d39256ef42..99090b7aa2 100644 --- a/packages/composite/package.json +++ b/packages/composite/package.json @@ -1,60 +1,58 @@ { "name": "@hpcc-js/composite", - "version": "2.9.0", + "version": "3.0.0", "description": "hpcc-js - Viz Composite", - "main": "dist/index.js", - "module": "dist/index.es6", - "unpkg": "dist/index.min.js", - "jsdelivr": "dist/index.min.js", - "types": "types/index.d.ts", - "typesVersions": { - "<3.8": { - "*": [ - "types-3.4/index.d.ts" - ] - } + "type": "module", + "exports": { + ".": { + "types": "./types/index.d.ts", + "default": "./dist/index.js" + }, + "./dist/*": "./dist/*" }, + "module": "./dist/index.js", + "browser": "./dist/index.js", + "types": "./types/index.d.ts", "files": [ "dist/*", + "src/*", "types/*", - "types-3.4/*", - "src/*" + "font-awesome/**/*" ], "scripts": { - "clean": "rimraf --glob lib* types dist *.tsbuildinfo", - "compile-es6": "tsc --module es6 --outDir ./lib-es6", - "compile-es6-watch": "npm run compile-es6 -- -w", - "compile-umd": "tsc --module umd --outDir ./lib-umd", - "compile-umd-watch": "npm run compile-umd -- -w", - "bundle": "rollup -c", - "bundle-watch": "npm run bundle -- -w", - "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js", - "gen-legacy-types": "downlevel-dts ./types ./types-3.4", - "build": "npm run compile-es6 && npm run bundle", - "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch", + "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo", + "bundle": "node esbuild.js", + "bundle-watch": "npm run bundle -- --development --watch", + "gen-types": "tsc --project tsconfig.json", + "gen-types-watch": "npm run gen-types -- --watch", + "build": "run-p gen-types bundle", "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js", "lint": "eslint ./src", + "lint-fix": "eslint --fix src/**/*.ts", "docs": "typedoc --options tdoptions.json .", - "update": "npx --yes npm-check-updates -u -t minor" + "test-browser": "vitest run --project browser", + "test": "vitest run", + "coverage": "vitest run --coverage", + "update": "npx --yes npm-check-updates -u -t minor", + "update-major": "npx --yes npm-check-updates -u" }, "dependencies": { - "@hpcc-js/api": "^2.14.0", - "@hpcc-js/chart": "^2.86.0", - "@hpcc-js/common": "^2.73.0", - "@hpcc-js/dgrid": "^2.34.0", - "@hpcc-js/form": "^2.12.0", - "@hpcc-js/html": "^2.44.0", - "@hpcc-js/layout": "^2.51.0", - "@hpcc-js/other": "^2.17.0", - "@hpcc-js/phosphor": "^2.20.0" + "@hpcc-js/api": "^3.1.0", + "@hpcc-js/chart": "^3.1.0", + "@hpcc-js/common": "^3.1.0", + "@hpcc-js/dgrid": "^3.0.0", + "@hpcc-js/form": "^3.0.0", + "@hpcc-js/html": "^3.0.0", + "@hpcc-js/util": "^3.1.0", + "@hpcc-js/other": "^3.0.0", + "@hpcc-js/phosphor": "^3.0.0" }, "devDependencies": { - "@hpcc-js/bundle": "^2.12.0", - "@types/d3-transition": "1.3.5", + "@hpcc-js/esbuild-plugins": "^1.2.0", + "@types/d3-transition": "1.3.6", "d3-collection": "^1", "d3-selection": "^1", - "d3-transition": "^1", - "tslib": "2.7.0" + "d3-transition": "^1" }, "repository": { "type": "git", @@ -67,4 +65,4 @@ "url": "https://github.com/hpcc-systems/Visualization/issues" }, "homepage": "https://github.com/hpcc-systems/Visualization" -} +} \ No newline at end of file diff --git a/packages/composite/rollup.config.mjs b/packages/composite/rollup.config.mjs deleted file mode 100644 index 3e0b2b9d2a..0000000000 --- a/packages/composite/rollup.config.mjs +++ /dev/null @@ -1,56 +0,0 @@ -import { external, globals } from "@hpcc-js/bundle"; -import alias from '@rollup/plugin-alias'; -import commonjs from '@rollup/plugin-commonjs'; -import sourcemaps from 'rollup-plugin-sourcemaps'; -import nodeResolve from '@rollup/plugin-node-resolve'; -import postcss from "rollup-plugin-postcss"; - -import pkg from "./package.json" with { type: "json" }; - -export default { - input: "lib-es6/index", - external: external, - output: [{ - file: pkg.main, - format: "umd", - sourcemap: true, - globals: globals, - name: pkg.name - }, { - file: pkg.module + ".js", - format: "es", - sourcemap: true, - globals: globals, - name: pkg.name - }], - plugins: [ - alias({ - entries: [ - { find: "d3-array", replacement: "@hpcc-js/common" }, - { find: "d3-brush", replacement: "@hpcc-js/common" }, - { find: "d3-collection", replacement: "@hpcc-js/common" }, - { find: "d3-color", replacement: "@hpcc-js/common" }, - { find: "d3-dispatch", replacement: "@hpcc-js/common" }, - { find: "d3-drag", replacement: "@hpcc-js/common" }, - { find: "d3-dsv", replacement: "@hpcc-js/common" }, - { find: "d3-ease", replacement: "@hpcc-js/common" }, - { find: "d3-format", replacement: "@hpcc-js/common" }, - { find: "d3-interpolate", replacement: "@hpcc-js/common" }, - { find: "d3-scale", replacement: "@hpcc-js/common" }, - { find: "d3-selection", replacement: "@hpcc-js/common" }, - { find: "d3-time-format", replacement: "@hpcc-js/common" }, - { find: "d3-transition", replacement: "@hpcc-js/common" }, - { find: "d3-zoom", replacement: "@hpcc-js/common" } - ] - }), - nodeResolve({ - preferBuiltins: true - }), - commonjs({}), - sourcemaps(), - postcss({ - extensions: [".css"], - minimize: true - }) - ] -}; \ No newline at end of file diff --git a/packages/composite/src/ChartPanel.ts b/packages/composite/src/ChartPanel.ts index 75b041f340..6cfbbed4d2 100644 --- a/packages/composite/src/ChartPanel.ts +++ b/packages/composite/src/ChartPanel.ts @@ -1,6 +1,6 @@ import { HTMLWidget, Widget } from "@hpcc-js/common"; import { ChartPanel } from "@hpcc-js/layout"; -import { MultiChart } from "./MultiChart"; +import { MultiChart } from "./MultiChart.ts"; import "../src/ChartPanel.css"; @@ -26,9 +26,7 @@ interface Summary { } Summary.prototype.publish("text", "", "string"); -export class MultiChartPanel extends ChartPanel { - - _widget: MultiChart; +export class MultiChartPanel extends ChartPanel { constructor() { super(); diff --git a/packages/composite/src/MegaChart.ts b/packages/composite/src/MegaChart.ts index db646aa074..a76e48732f 100644 --- a/packages/composite/src/MegaChart.ts +++ b/packages/composite/src/MegaChart.ts @@ -4,7 +4,7 @@ import { Border, Grid, Toolbar } from "@hpcc-js/layout"; import { Html, Legend } from "@hpcc-js/other"; import { select as d3Select } from "d3-selection"; import "d3-transition"; -import { MultiChart } from "./MultiChart"; +import { MultiChart } from "./MultiChart.ts"; import "../src/MegaChart.css"; diff --git a/packages/composite/src/MultiChart.ts b/packages/composite/src/MultiChart.ts index 98aa5b4640..fc0e254d17 100644 --- a/packages/composite/src/MultiChart.ts +++ b/packages/composite/src/MultiChart.ts @@ -1,7 +1,7 @@ import { IGraph, INDChart } from "@hpcc-js/api"; import { Database, HTMLWidget, Utility, Widget } from "@hpcc-js/common"; import { map as d3Map } from "d3-collection"; -import { requireWidget } from "./Utility"; +import { requireWidget } from "./Utility.ts"; declare const require: any; export class MultiChart extends HTMLWidget { @@ -99,12 +99,12 @@ export class MultiChart extends HTMLWidget { const classInfo = Utility.parseClassID(this._allCharts[chartType].widgetClass); switch (classInfo.package) { case "@hpcc-js/chart": - require(["@hpcc-js/chart"], mod => { + import("@hpcc-js/chart").then(mod => { callback(new mod[classInfo.widgetID]()); }); break; case "@hpcc-js/dgrid": - require(["@hpcc-js/dgrid"], mod => { + import("@hpcc-js/dgrid").then(mod => { callback(new mod[classInfo.widgetID]()); }); break; diff --git a/packages/composite/src/MultiChartSurface.ts b/packages/composite/src/MultiChartSurface.ts index 2a18ae8e4f..9413ea1be6 100644 --- a/packages/composite/src/MultiChartSurface.ts +++ b/packages/composite/src/MultiChartSurface.ts @@ -1,6 +1,6 @@ import { INDChart } from "@hpcc-js/api"; import { ResizeSurface } from "@hpcc-js/common"; -import { MultiChart } from "./MultiChart"; +import { MultiChart } from "./MultiChart.ts"; export function MultiChartSurface() { ResizeSurface.call(this); diff --git a/packages/composite/src/Persist.ts b/packages/composite/src/Persist.ts index d6c173cf00..15594d3891 100644 --- a/packages/composite/src/Persist.ts +++ b/packages/composite/src/Persist.ts @@ -1,6 +1,6 @@ import { Platform, Utility, Widget } from "@hpcc-js/common"; import { Persist } from "@hpcc-js/other"; -import { requireWidget } from "./Utility"; +import { requireWidget } from "./Utility.ts"; export function retrofit_114_serialization(state, replacement_version) { replacement_version = !replacement_version || replacement_version === "1.14.2-dev" ? "1.18.0" : replacement_version; diff --git a/packages/composite/src/index.ts b/packages/composite/src/index.ts index db403739c0..32d4a7afba 100644 --- a/packages/composite/src/index.ts +++ b/packages/composite/src/index.ts @@ -1,9 +1,9 @@ -export * from "./__package__"; -export * from "./ChartPanel"; -export * from "./Dermatology"; -export * from "./MegaChart"; -export * from "./MultiChart"; -import * as Persist from "./Persist"; +export * from "./__package__.ts"; +export * from "./ChartPanel.ts"; +export * from "./Dermatology.ts"; +export * from "./MegaChart.ts"; +export * from "./MultiChart.ts"; +import * as Persist from "./Persist.ts"; export { Persist }; -import * as Utility from "./Utility"; +import * as Utility from "./Utility.ts"; export { Utility }; diff --git a/packages/composite/tests/composite.browser.spec.ts b/packages/composite/tests/composite.browser.spec.ts new file mode 100644 index 0000000000..febec5a308 --- /dev/null +++ b/packages/composite/tests/composite.browser.spec.ts @@ -0,0 +1,66 @@ +import * as composite from "@hpcc-js/composite"; +import { MultiChart, Dermatology, MegaChart, MultiChartPanel } from "@hpcc-js/composite"; +import { Class, HTMLWidget, SVGWidget } from "@hpcc-js/common"; +import { describe, it, expect } from "vitest"; +import { classDef, data, render } from "../../common/tests/index.ts"; + +const urlSearch: string = window.location.href.split("?")[1]; +const simple = { + ND: { + columns: ["Subject", "Year 1", "Year 2", "Year 3", "Year 4"], + data: [ + ["English", 5, 43, 41, 92], + ["English II", 17, 43, 83, 93], + ["English III", 6, 43, 64, 93], + ["Geography", 7, 45, 52, 83], + ["Geography II", 16, 73, 52, 83], + ["Geography III", 26, 83, 11, 72], + ["Science", 66, 60, 85, 6], + ["Science II", 46, 20, 53, 7], + ["Science III", 46, 20, 38, 7], + ["Math", 98, 30, 23, 13], + ["Math II", 76, 30, 34, 6], + ["Math III", 80, 30, 27, 8] + ] + }, + WordCloud: { + columns: ["Word", "Weight"], + words: ["Myriel", "Napoleon", "Mlle.Baptistine", "Mme.Magloire", "CountessdeLo", "Geborand", "Champtercier", "Cravatte", "Count", "OldMan", "Labarre", "Valjean", "Marguerite", "Mme.deR", "Isabeau", "Gervais", "Tholomyes", "Listolier", "Fameuil", "Blacheville", "Favourite", "Dahlia", "Zephine", "Fantine", "Mme.Thenardier", "Thenardier", "Cosette", "Javert", "Fauchelevent", "Bamatabois", "Perpetue", "Simplice", "Scaufflaire", "Woman1", "Judge", "Champmathieu", "Brevet", "Chenildieu", "Cochepaille", "Pontmercy", "Boulatruelle", "Eponine", "Anzelma", "Woman2", "MotherInnocent", "Gribier", "Jondrette", "Mme.Burgon", "Gavroche", "Gillenormand", "Magnon", "Mlle.Gillenormand", "Mme.Pontmercy", "Mlle.Vaubois", "Lt.Gillenormand", "Marius", "BaronessT", "Mabeuf", "Enjolras", "Combeferre", "Prouvaire", "Feuilly", "Courfeyrac", "Bahorel", "Bossuet", "Joly", "Grantaire", "MotherPlutarch", "Gueulemer", "Babet", "Claquesous", "Montparnasse", "Toussaint", "Child1", "Child2", "Brujon", "Mme.Hucheloup"] + } +}; +describe("@hpcc-js/composite", () => { + for (const key in composite) { + const item = (composite as any)[key]; + if (item) { + if (!urlSearch || urlSearch === item.prototype.constructor.name) { + describe(`${item.prototype?.constructor?.name}`, () => { + it("Simple", () => { + expect(true).to.be.true; + }); + if (item.prototype instanceof Class) { + classDef("composite", item); + } + if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) { + switch (item.prototype.constructor) { + case MultiChart: + render(new MultiChart() + .columns(data.Pivot.subjects.columns) + .data(data.Pivot.subjects.data) + .chartType("COLUMN") + ); + case Dermatology: + case MegaChart: + case MultiChartPanel: + break; + + default: + it("Has render test", () => { + expect(false).to.be.true; + }); + } + } + }); + } + } + } +}); diff --git a/packages/composite/tsconfig.json b/packages/composite/tsconfig.json index 3ef07b71ac..3cd3be3a69 100644 --- a/packages/composite/tsconfig.json +++ b/packages/composite/tsconfig.json @@ -1,40 +1,25 @@ { - "extends": "../tsconfig.settings.json", "compilerOptions": { - "rootDir": "./src", - "outDir": "./lib-umd", - "declarationDir": "./types", + "rootDir": "src", + "module": "NodeNext", + "target": "ESNext", + "resolveJsonModule": true, + "emitDeclarationOnly": true, + "declaration": true, + "declarationDir": "types", + "strict": false, + "noImplicitAny": false, + "noImplicitThis": false, + "strictNullChecks": false, + "skipLibCheck": true, + "allowImportingTsExtensions": true, + "lib": [ + "DOM", + "ESNext", + "ES2020" + ] }, "include": [ - "./src/**/*" - ], - "references": [ - { - "path": "../api" - }, - { - "path": "../chart" - }, - { - "path": "../common" - }, - { - "path": "../dgrid" - }, - { - "path": "../form" - }, - { - "path": "../html" - }, - { - "path": "../layout" - }, - { - "path": "../other" - }, - { - "path": "../phosphor" - } + "./src/index.ts" ] } \ No newline at end of file diff --git a/packages/composite/vitest.workspace.ts b/packages/composite/vitest.workspace.ts new file mode 100644 index 0000000000..fa7bb0720b --- /dev/null +++ b/packages/composite/vitest.workspace.ts @@ -0,0 +1,6 @@ +import { defineWorkspace } from 'vitest/config'; +import baseWorkspace from '../../vitest.workspace.ts'; + +export default defineWorkspace([ + ...baseWorkspace +]) \ No newline at end of file diff --git a/packages/form/.vscode/launch.json b/packages/form/.vscode/launch.json new file mode 100644 index 0000000000..7c2436335f --- /dev/null +++ b/packages/form/.vscode/launch.json @@ -0,0 +1,47 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "test-browser", + "type": "msedge", + "request": "launch", + "url": "http://localhost:8888", + "webRoot": "${workspaceFolder}", + "outFiles": [ + "${workspaceFolder}/**/*.js", + "!**/node_modules/**" + ], + }, + { + "name": "test-node", + "type": "node", + "request": "launch", + "runtimeArgs": [ + "run-script", + "test-node" + ], + "runtimeExecutable": "npm", + "skipFiles": [ + "/**" + ], + "outFiles": [ + "${workspaceFolder}/**/*.js", + "!**/node_modules/**" + ], + }, + { + "name": "index.html", + "request": "launch", + "type": "msedge", + "url": "file:///${workspaceFolder}/index.html", + "runtimeArgs": [ + "--disable-web-security" + ], + "webRoot": "${workspaceFolder}", + "outFiles": [ + "${workspaceFolder}/**/*.js", + "!**/node_modules/**" + ] + } + ] +} \ No newline at end of file diff --git a/packages/form/.vscode/tasks.json b/packages/form/.vscode/tasks.json index 7fffdb949c..120545d06c 100644 --- a/packages/form/.vscode/tasks.json +++ b/packages/form/.vscode/tasks.json @@ -1,20 +1,36 @@ { - // See https://go.microsoft.com/fwlink/?LinkId=733558 - // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { + "label": "gen-types-watch", "type": "npm", - "script": "compile-umd-watch", - "group": { - "kind": "build", - "isDefault": true - }, + "script": "gen-types-watch", "problemMatcher": [ "$tsc-watch" ], - "label": "npm: compile-umd-watch", - "detail": "tsc --module umd --outDir ./lib-umd --watch" + "presentation": { + "group": "group-build" + } + }, + { + "label": "bundle-watch", + "type": "npm", + "script": "bundle-watch", + "problemMatcher": [], + "presentation": { + "group": "group-build" + } + }, + { + "label": "build", + "dependsOn": [ + "gen-types-watch", + "bundle-watch", + ], + "group": { + "kind": "build", + "isDefault": true + } } ] } \ No newline at end of file diff --git a/packages/form/esbuild.js b/packages/form/esbuild.js new file mode 100644 index 0000000000..67b91a9988 --- /dev/null +++ b/packages/form/esbuild.js @@ -0,0 +1,29 @@ +import { browserTpl } from "@hpcc-js/esbuild-plugins"; +import pkg from "./package.json" with { type: "json" }; + +// config --- +await Promise.all([ + browserTpl("src/index.ts", "dist/index", { + keepNames: true, + alias: { + "d3-array": "@hpcc-js/common", + "d3-brush": "@hpcc-js/common", + "d3-collection": "@hpcc-js/common", + "d3-color": "@hpcc-js/common", + "d3-dispatch": "@hpcc-js/common", + "d3-drag": "@hpcc-js/common", + "d3-dsv": "@hpcc-js/common", + "d3-ease": "@hpcc-js/common", + "d3-format": "@hpcc-js/common", + "d3-interpolate": "@hpcc-js/common", + "d3-scale": "@hpcc-js/common", + "d3-selection": "@hpcc-js/common", + "d3-time-format": "@hpcc-js/common", + "d3-transition": "@hpcc-js/common", + "d3-zoom": "@hpcc-js/common" + }, + external: [ + ...Object.keys(pkg.dependencies), + ] + }) +]); diff --git a/packages/form/index.html b/packages/form/index.html new file mode 100644 index 0000000000..6f902b3894 --- /dev/null +++ b/packages/form/index.html @@ -0,0 +1,97 @@ + + + + + Home + + + + + + + +

ESM Quick Test

+
+ + + + + \ No newline at end of file diff --git a/packages/form/package.json b/packages/form/package.json index 45b6332ae2..9b4c88f274 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -1,55 +1,53 @@ { "name": "@hpcc-js/form", - "version": "2.12.0", + "version": "3.0.0", "description": "hpcc-js - Viz Form", - "main": "dist/index.js", - "module": "dist/index.es6", - "unpkg": "dist/index.min.js", - "jsdelivr": "dist/index.min.js", - "types": "types/index.d.ts", - "typesVersions": { - "<3.8": { - "*": [ - "types-3.4/index.d.ts" - ] - } + "type": "module", + "exports": { + ".": { + "types": "./types/index.d.ts", + "default": "./dist/index.js" + }, + "./dist/*": "./dist/*" }, + "module": "./dist/index.js", + "browser": "./dist/index.js", + "types": "./types/index.d.ts", "files": [ "dist/*", + "src/*", "types/*", - "types-3.4/*", - "src/*" + "font-awesome/**/*" ], "scripts": { - "clean": "rimraf --glob lib* types dist *.tsbuildinfo", - "compile-es6": "tsc --module es6 --outDir ./lib-es6", - "compile-es6-watch": "npm run compile-es6 -- -w", - "compile-umd": "tsc --module umd --outDir ./lib-umd", - "compile-umd-watch": "npm run compile-umd -- -w", - "bundle": "rollup -c", - "bundle-watch": "npm run bundle -- -w", - "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js", - "gen-legacy-types": "downlevel-dts ./types ./types-3.4", - "build": "npm run compile-es6 && npm run bundle", - "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch", + "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo", + "bundle": "node esbuild.js", + "bundle-watch": "npm run bundle -- --development --watch", + "gen-types": "tsc --project tsconfig.json", + "gen-types-watch": "npm run gen-types -- --watch", + "build": "run-p gen-types bundle", "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js", "lint": "eslint ./src", + "lint-fix": "eslint --fix src/**/*.ts", "docs": "typedoc --options tdoptions.json .", - "update": "npx --yes npm-check-updates -u -t minor" + "test-browser": "vitest run --project browser", + "test": "vitest run", + "coverage": "vitest run --coverage", + "update": "npx --yes npm-check-updates -u -t minor", + "update-major": "npx --yes npm-check-updates -u" }, "dependencies": { - "@hpcc-js/api": "^2.14.0", - "@hpcc-js/chart": "^2.86.0", - "@hpcc-js/common": "^2.73.0" + "@hpcc-js/api": "^3.1.0", + "@hpcc-js/chart": "^3.1.0", + "@hpcc-js/common": "^3.0.0" }, "devDependencies": { - "@hpcc-js/bundle": "^2.12.0", + "@hpcc-js/esbuild-plugins": "^1.2.0", "d3-brush": "^1", "d3-color": "3.1.0", "d3-drag": "^1", "d3-scale": "^1", - "d3-selection": "^1", - "tslib": "2.7.0" + "d3-selection": "^1" }, "repository": { "type": "git", diff --git a/packages/form/rollup.config.mjs b/packages/form/rollup.config.mjs deleted file mode 100644 index 3e0b2b9d2a..0000000000 --- a/packages/form/rollup.config.mjs +++ /dev/null @@ -1,56 +0,0 @@ -import { external, globals } from "@hpcc-js/bundle"; -import alias from '@rollup/plugin-alias'; -import commonjs from '@rollup/plugin-commonjs'; -import sourcemaps from 'rollup-plugin-sourcemaps'; -import nodeResolve from '@rollup/plugin-node-resolve'; -import postcss from "rollup-plugin-postcss"; - -import pkg from "./package.json" with { type: "json" }; - -export default { - input: "lib-es6/index", - external: external, - output: [{ - file: pkg.main, - format: "umd", - sourcemap: true, - globals: globals, - name: pkg.name - }, { - file: pkg.module + ".js", - format: "es", - sourcemap: true, - globals: globals, - name: pkg.name - }], - plugins: [ - alias({ - entries: [ - { find: "d3-array", replacement: "@hpcc-js/common" }, - { find: "d3-brush", replacement: "@hpcc-js/common" }, - { find: "d3-collection", replacement: "@hpcc-js/common" }, - { find: "d3-color", replacement: "@hpcc-js/common" }, - { find: "d3-dispatch", replacement: "@hpcc-js/common" }, - { find: "d3-drag", replacement: "@hpcc-js/common" }, - { find: "d3-dsv", replacement: "@hpcc-js/common" }, - { find: "d3-ease", replacement: "@hpcc-js/common" }, - { find: "d3-format", replacement: "@hpcc-js/common" }, - { find: "d3-interpolate", replacement: "@hpcc-js/common" }, - { find: "d3-scale", replacement: "@hpcc-js/common" }, - { find: "d3-selection", replacement: "@hpcc-js/common" }, - { find: "d3-time-format", replacement: "@hpcc-js/common" }, - { find: "d3-transition", replacement: "@hpcc-js/common" }, - { find: "d3-zoom", replacement: "@hpcc-js/common" } - ] - }), - nodeResolve({ - preferBuiltins: true - }), - commonjs({}), - sourcemaps(), - postcss({ - extensions: [".css"], - minimize: true - }) - ] -}; \ No newline at end of file diff --git a/packages/form/src/Button.ts b/packages/form/src/Button.ts index 51bec0ecb0..483dcf308e 100644 --- a/packages/form/src/Button.ts +++ b/packages/form/src/Button.ts @@ -36,16 +36,17 @@ export class Button extends HTMLWidget { this._inputElement[0].text(this.value()); } - - // IInput --- - name: { (): string; (_: string): Button }; - name_exists: () => boolean; - label: { (): string; (_: string): Button }; - label_exists: () => boolean; - value: { (): any; (_: any): Button }; - value_exists: () => boolean; - validate: { (): string; (_: string): Button }; - validate_exists: () => boolean; } Button.prototype._class += " form_Button"; Button.prototype.implements(IInput.prototype); + +export interface Button { + name(): string; + name(_: string): Button; + label(): string; + label(_: string): Button; + value(): any; + value(_: any): Button; + validate(): string; + validate(_: string): Button; +} diff --git a/packages/form/src/CheckBox.ts b/packages/form/src/CheckBox.ts index 0edc2b3c6d..4aed064243 100644 --- a/packages/form/src/CheckBox.ts +++ b/packages/form/src/CheckBox.ts @@ -75,21 +75,29 @@ export class CheckBox extends HTMLWidget { } this._inputElement[0].html(optionHTML); } - - selectOptions: { (): any[]; (_: any[]): CheckBox }; - selectOptions_exists: () => boolean; - - // IInput --- - name: { (): string; (_: string): CheckBox }; - name_exists: () => boolean; - label: { (): string; (_: string): CheckBox }; - label_exists: () => boolean; - value: { (): any; (_: any): CheckBox }; - value_exists: () => boolean; - validate: { (): string; (_: string): CheckBox }; - validate_exists: () => boolean; } CheckBox.prototype._class += " form_CheckBox"; CheckBox.prototype.implements(IInput.prototype); +export interface CheckBox { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- + selectOptions(): any[]; + selectOptions(_: any[]): this; + selectOptions_exists(): boolean; +} + CheckBox.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list"); diff --git a/packages/form/src/ColorInput.ts b/packages/form/src/ColorInput.ts index b85547e50f..cbdf326b05 100644 --- a/packages/form/src/ColorInput.ts +++ b/packages/form/src/ColorInput.ts @@ -60,16 +60,22 @@ export class ColorInput extends HTMLWidget { this._inputElement[1].style("height", (bbox.height - 2) + "px"); } - - // IInput --- - name: { (): string; (_: string): ColorInput }; - name_exists: () => boolean; - label: { (): string; (_: string): ColorInput }; - label_exists: () => boolean; - value: { (): any; (_: any): ColorInput }; - value_exists: () => boolean; - validate: { (): string; (_: string): ColorInput }; - validate_exists: () => boolean; } ColorInput.prototype._class += " form_ColorInput"; ColorInput.prototype.implements(IInput.prototype); + +export interface ColorInput { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; +} diff --git a/packages/form/src/FieldForm.ts b/packages/form/src/FieldForm.ts index 9c4cb77e64..4675b6e793 100644 --- a/packages/form/src/FieldForm.ts +++ b/packages/form/src/FieldForm.ts @@ -1,6 +1,6 @@ import { Database } from "@hpcc-js/common"; -import { Form } from "./Form"; -import { Input } from "./Input"; +import { Form } from "./Form.ts"; +import { Input } from "./Input.ts"; import "../src/Form.css"; diff --git a/packages/form/src/Form.ts b/packages/form/src/Form.ts index 4ce46e05fd..8c33072d3d 100644 --- a/packages/form/src/Form.ts +++ b/packages/form/src/Form.ts @@ -1,5 +1,5 @@ import { d3Event, HTMLWidget, select as d3Select, SVGWidget, Widget, WidgetArray } from "@hpcc-js/common"; -import { Button } from "./Button"; +import { Button } from "./Button.ts"; import "../src/Form.css"; @@ -308,21 +308,28 @@ export class Form extends HTMLWidget { click(row, col, sel) { } - - validate: { (): boolean; (_: boolean): Form }; - validate_exists: () => boolean; - inputs: { (): any[]; (_: any[]): Form }; - inputs_exists: () => boolean; - inputs_reset: () => void; - showSubmit: { (): boolean; (_: boolean): Form }; - showSubmit_exists: () => boolean; - omitBlank: { (): boolean; (_: boolean): Form }; - omitBlank_exists: () => boolean; - allowEmptyRequest: { (): boolean; (_: boolean): Form }; - allowEmptyRequest_exists: () => boolean; } Form.prototype._class += " form_Form"; +export interface Form { + validate(): boolean; + validate(_: boolean): this; + validate_exists(): boolean; + inputs(): any[]; + inputs(_: any[]): this; + inputs_exists(): boolean; + inputs_reset(): void; + showSubmit(): boolean; + showSubmit(_: boolean): this; + showSubmit_exists(): boolean; + omitBlank(): boolean; + omitBlank(_: boolean): this; + omitBlank_exists(): boolean; + allowEmptyRequest(): boolean; + allowEmptyRequest(_: boolean): this; + allowEmptyRequest_exists(): boolean; +} + Form.prototype.publish("validate", true, "boolean", "Enable/Disable input validation"); Form.prototype.publish("inputs", [], "widgetArray", "Array of input widgets", null, { render: false }); Form.prototype.publish("showSubmit", true, "boolean", "Show Submit/Cancel Controls"); diff --git a/packages/form/src/Input.ts b/packages/form/src/Input.ts index 0327016239..4d12d78327 100644 --- a/packages/form/src/Input.ts +++ b/packages/form/src/Input.ts @@ -1,5 +1,5 @@ import { IInput } from "@hpcc-js/api"; -import { HTMLWidget } from "@hpcc-js/common"; +import { Database, HTMLWidget } from "@hpcc-js/common"; import "../src/Input.css"; @@ -90,32 +90,47 @@ export class Input extends HTMLWidget { } } - type: { (): string; (_: string): Input }; - type_exists: () => boolean; - type_default: { (): string; (_: string): Input }; - inlineLabel: { (): string; (_: string): Input }; - inlineLabel_exists: () => boolean; - - // IInput --- - name: { (): string; (_: string): Input }; - name_exists: () => boolean; - label: { (): string; (_: string): Input }; - label_exists: () => boolean; - value: { (): any; (_: any): Input }; - value_exists: () => boolean; - validate: { (): string; (_: string): Input }; - validate_exists: () => boolean; - // IInput Events --- - blur: (w: Input) => void; - keyup: (w: Input) => void; - focus: (w: Input) => void; - click: (w: Input) => void; - dblclick: (w: Input) => void; - change: (w: Input, complete: boolean) => void; + blur(w: Input) { + }; + keyup(w: Input) { + }; + focus(w: Input) { + }; + click(w: Input) { + }; + dblclick(w: Input) { + }; + change(w: Input, complete: boolean) { + }; } Input.prototype._class += " form_Input"; Input.prototype.implements(IInput.prototype); -Input.prototype.publish("type", "text", "set", "Input type", ["number", "button", "checkbox", "date", "text", "textarea", "search", "email", "time", "datetime", "hidden"]); +export interface Input { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- + type(): Database.FieldType | "button" | "checkbox" | "text" | "textarea" | "search" | "email" | "datetime"; + type(_: Database.FieldType | "button" | "checkbox" | "text" | "textarea" | "search" | "email" | "datetime"): this; + type_exists(): boolean; + type_default(): string; + inlineLabel(): string; + inlineLabel(_: string): this; + inlineLabel_exists(): boolean; +} + +Input.prototype.publish("type", "text", "set", "Input type", ["string", "number", "boolean", "date", "time", "hidden", "nested", "button", "checkbox", "text", "textarea", "search", "email", "datetime"]); Input.prototype.publish("inlineLabel", null, "string", "Input Label", null, { optional: true }); diff --git a/packages/form/src/InputRange.ts b/packages/form/src/InputRange.ts index 211f7386cb..b2f0be1d86 100644 --- a/packages/form/src/InputRange.ts +++ b/packages/form/src/InputRange.ts @@ -62,25 +62,34 @@ export class InputRange extends HTMLWidget { .property("value", this._rangeData.length > idx ? this._rangeData[idx] : ""); }, this); } - - type: { (): string; (_: string): InputRange }; - type_exists: () => boolean; - inlineLabel: { (): string; (_: string): InputRange }; - inlineLabel_exists: () => boolean; - value: { (): any[]; (_: any[]): InputRange }; - value_exists: () => boolean; - - // IInput --- - name: { (): string; (_: string): InputRange }; - name_exists: () => boolean; - label: { (): string; (_: string): InputRange }; - label_exists: () => boolean; - validate: { (): string; (_: string): InputRange }; - validate_exists: () => boolean; } InputRange.prototype._class += " form_InputRange"; InputRange.prototype.implements(IInput.prototype); +export interface InputRange { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any[]; + value(_: any[]): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- + type(): string; + type(_: string): this; + type_exists(): boolean; + inlineLabel(): string; + inlineLabel(_: string): this; + inlineLabel_exists(): boolean; +} + InputRange.prototype.publish("type", "text", "set", "InputRange type", ["number", "date", "text", "time", "datetime", "hidden"]); InputRange.prototype.publish("inlineLabel", null, "string", "InputRange Label", null, { optional: true }); InputRange.prototype.publish("value", ["", ""], "array", "Input Current Value", null, { override: true }); diff --git a/packages/form/src/OnOff.ts b/packages/form/src/OnOff.ts index 8725fec124..623afa3c61 100644 --- a/packages/form/src/OnOff.ts +++ b/packages/form/src/OnOff.ts @@ -96,19 +96,24 @@ export class OnOff extends HTMLWidget { .style("background-color", this.onColor()) ; } - - // IInput --- - name: { (): string; (_: string): OnOff }; - name_exists: () => boolean; - label: { (): string; (_: string): OnOff }; - label_exists: () => boolean; - value: { (): any; (_: any): OnOff }; - value_exists: () => boolean; - validate: { (): string; (_: string): OnOff }; - validate_exists: () => boolean; } OnOff.prototype._class += " form_OnOff"; export interface OnOff { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- marginLeft(): number; marginLeft(_: number): this; marginBottom(): number; diff --git a/packages/form/src/Radio.ts b/packages/form/src/Radio.ts index 6db2c29c39..e32a273cd9 100644 --- a/packages/form/src/Radio.ts +++ b/packages/form/src/Radio.ts @@ -55,21 +55,29 @@ export class Radio extends HTMLWidget { } }); } - - selectOptions: { (): any[]; (_: any[]): Radio }; - selectOptions_exists: () => boolean; - - // IInput --- - name: { (): string; (_: string): Radio }; - name_exists: () => boolean; - label: { (): string; (_: string): Radio }; - label_exists: () => boolean; - value: { (): any; (_: any): Radio }; - value_exists: () => boolean; - validate: { (): string; (_: string): Radio }; - validate_exists: () => boolean; } Radio.prototype._class += " form_Radio"; Radio.prototype.implements(IInput.prototype); +export interface Radio { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- + selectOptions(): any[]; + selectOptions(_: any[]): this; + selectOptions_exists(): boolean; +} + Radio.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list"); diff --git a/packages/form/src/Range.ts b/packages/form/src/Range.ts index 052fd690c1..005f9f7c02 100644 --- a/packages/form/src/Range.ts +++ b/packages/form/src/Range.ts @@ -72,31 +72,43 @@ export class Range extends HTMLWidget { } this._inputElement[0].html(optionHTML); } - - type: { (): string; (_: string): Range }; - type_exists: () => boolean; - selectOptions: { (): any[]; (_: any[]): Range }; - selectOptions_exists: () => boolean; - low: { (): number; (_: number): Range }; - low_exists: () => boolean; - high: { (): number; (_: number): Range }; - high_exists: () => boolean; - step: { (): number; (_: number): Range }; - step_exists: () => boolean; - - // IInput --- - name: { (): string; (_: string): Range }; - name_exists: () => boolean; - label: { (): string; (_: string): Range }; - label_exists: () => boolean; - value: { (): any; (_: any): Range }; - value_exists: () => boolean; - validate: { (): string; (_: string): Range }; - validate_exists: () => boolean; } Range.prototype._class += " form_Range"; Range.prototype.implements(IInput.prototype); +export interface Range { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- + type(): string; + type(_: string): this; + type_exists(): boolean; + selectOptions(): any[]; + selectOptions(_: any[]): this; + selectOptions_exists(): boolean; + low(): number; + low(_: number): this; + low_exists(): boolean; + high(): number; + high(_: number): this; + high_exists(): boolean; + step(): number; + step(_: number): this; + step_exists(): boolean; +} + Range.prototype.publish("type", "text", "set", "Input type", ["html-color", "number", "checkbox", "button", "select", "textarea", "date", "text", "range", "search", "email", "time", "datetime"]); Range.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list"); Range.prototype.publish("low", null, "number", "Minimum value for Range input"); diff --git a/packages/form/src/Select.ts b/packages/form/src/Select.ts index c131cd662f..64a6df08bb 100644 --- a/packages/form/src/Select.ts +++ b/packages/form/src/Select.ts @@ -57,24 +57,33 @@ export class Select extends HTMLWidget { } this._inputElement[0].html(optionHTML); } - - selectOptions: { (): any[]; (_: any[]): Select }; - selectOptions_exists: () => boolean; - maxWidth: { (): number; (_: number): Select }; - maxWidth_exists: () => boolean; - - // IInput --- - name: { (): string; (_: string): Select }; - name_exists: () => boolean; - label: { (): string; (_: string): Select }; - label_exists: () => boolean; - value: { (): any; (_: any): Select }; - value_exists: () => boolean; - validate: { (): string; (_: string): Select }; - validate_exists: () => boolean; } Select.prototype._class += " form_Select"; Select.prototype.implements(IInput.prototype); +export interface Select { + // IInput --- + name(): string; + name(_: string): this; + name_exists(): boolean; + label(): string; + label(_: string): this; + label_exists(): boolean; + value(): any; + value(_: any): this; + value_exists(): boolean; + validate(): string; + validate(_: string): this; + validate_exists(): boolean; + + // Properties --- + selectOptions(): any[]; + selectOptions(_: any[]): this; + selectOptions_exists(): boolean; + maxWidth(): number; + maxWidth(_: number): this; + maxWidth_exists(): boolean; +} + Select.prototype.publish("selectOptions", [], "array", "Array of options used to fill a dropdown list"); Select.prototype.publish("maxWidth", 120, "number", "Width", null, { optional: true }); diff --git a/packages/form/src/Slider.ts b/packages/form/src/Slider.ts index 87e863556d..b4ea8fc8a5 100644 --- a/packages/form/src/Slider.ts +++ b/packages/form/src/Slider.ts @@ -270,13 +270,17 @@ export class Slider extends SVGWidget { return retVal; }; - name: (_?: string) => string | this; - change: (_: Slider) => void; } Slider.prototype._class += " form_Slider"; Slider.prototype.implements(IInput.prototype); export interface Slider { + // IInput --- + name(): string; + name(_: string): this; + change(_: Slider): void; + + // Properties --- padding(): number; padding(_: number): this; fontSize(): number; @@ -357,7 +361,7 @@ Slider.prototype.publish("tickDateFormat", null, "string"); Slider.prototype.publish("tickValueFormat", ",.0f", "string"); const name = Slider.prototype.name; -Slider.prototype.name = function (_: any): any { +Slider.prototype.name = function (_?: any): any { const retVal = name.apply(this, arguments); if (arguments.length) { const val = _ instanceof Array ? _ : [_]; diff --git a/packages/form/src/TextArea.ts b/packages/form/src/TextArea.ts index 68267a4fb3..f10dd67ecf 100644 --- a/packages/form/src/TextArea.ts +++ b/packages/form/src/TextArea.ts @@ -1,4 +1,4 @@ -import { Input } from "./Input"; +import { Input } from "./Input.ts"; export class TextArea extends Input { constructor() { @@ -27,20 +27,27 @@ export class TextArea extends Input { ; } - rows: { (): number; (_: number): TextArea }; - rows_exists: () => boolean; - cols: { (): number; (_: number): TextArea }; - cols_exists: () => boolean; - wrap: { (): string; (_: string): TextArea }; - wrap_exists: () => boolean; - minHeight: { (): number; (_: number): TextArea }; - minHeight_exists: () => boolean; - spellcheck: { (): boolean; (_: boolean): TextArea }; - spellcheck_exists: () => boolean; - value: { (): any; (_: any): TextArea }; } TextArea.prototype._class += " form_TextArea"; +export interface TextArea { + rows(): number; + rows(_: number): this; + rows_exists(): boolean; + cols(): number; + cols(_: number): this; + cols_exists(): boolean; + wrap(): string; + wrap(_: string): this; + wrap_exists(): boolean; + minHeight(): number; + minHeight(_: number): this; + minHeight_exists(): boolean; + spellcheck(): boolean; + spellcheck(_: boolean): this; + spellcheck_exists(): boolean; +} + TextArea.prototype.publish("rows", null, "number", "Rows", null, { optional: true }); TextArea.prototype.publish("cols", null, "number", "Columns", null, { optional: true }); TextArea.prototype.publish("wrap", "off", "set", "Wrap", ["off", "on"]); diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts index 2b9b7b1847..17b7fc569d 100644 --- a/packages/form/src/index.ts +++ b/packages/form/src/index.ts @@ -1,14 +1,14 @@ -export * from "./__package__"; -export * from "./Button"; -export * from "./CheckBox"; -export * from "./ColorInput"; -export * from "./Form"; -export * from "./FieldForm"; -export * from "./Input"; -export * from "./InputRange"; -export * from "./OnOff"; -export * from "./Radio"; -export * from "./Range"; -export * from "./Select"; -export * from "./Slider"; -export * from "./TextArea"; +export * from "./__package__.ts"; +export * from "./Button.ts"; +export * from "./CheckBox.ts"; +export * from "./ColorInput.ts"; +export * from "./Form.ts"; +export * from "./FieldForm.ts"; +export * from "./Input.ts"; +export * from "./InputRange.ts"; +export * from "./OnOff.ts"; +export * from "./Radio.ts"; +export * from "./Range.ts"; +export * from "./Select.ts"; +export * from "./Slider.ts"; +export * from "./TextArea.ts"; diff --git a/packages/form/tests/form.browser.spec.ts b/packages/form/tests/form.browser.spec.ts new file mode 100644 index 0000000000..6adc44e8f0 --- /dev/null +++ b/packages/form/tests/form.browser.spec.ts @@ -0,0 +1,130 @@ +import * as form from "@hpcc-js/form"; +import { Button, CheckBox, ColorInput, FieldForm, Form, Input, InputRange, OnOff, Radio, Select, Slider, TextArea, Range } from "@hpcc-js/form"; +import { Class, Database, HTMLWidget, SVGWidget, WidgetArray } from "@hpcc-js/common"; +import { describe, it, expect } from "vitest"; +import { classDef, data, render } from "../../common/tests/index.ts"; + +const urlSearch: string = window.location.href.split("?")[1]; + +describe("@hpcc-js/form", () => { + for (const key in form) { + const item = (form as any)[key]; + if (item) { + if (!urlSearch || urlSearch === item.prototype.constructor.name) { + describe(`${item.prototype?.constructor?.name}`, () => { + it("Simple", () => { + expect(true).to.be.true; + }); + if (item.prototype instanceof Class) { + classDef("form", item); + } + if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) { + switch (item.prototype.constructor) { + case Button: + render(new Button() + .name("button-test") + .value("Button Test") + ); + break; + case ColorInput: + break; + case Radio: + break; + case CheckBox: + break; + case FieldForm: + render(new FieldForm() + .fields([ + new Database.Field().id("fname").label("First Name"), + new Database.Field().id("lname").label("Last Name"), + new Database.Field().id("age").label("Age") + ]) + .data([["Joe", "Bloggs", 42]]) + ); + break; + case Form: + render(new Form() + .inputs([ + new Input() + .name("textbox-test") + .label("Alphanumeric") + .type("text") + .validate("^[A-Za-z0-9]+$") + .value("SomeString123"), + new InputRange() + .name("textbox-range-test") + .label("Range") + .value(["SomeString001", "SomeString100"]), + new Input() + .name("number-test") + .label("Number Test") + .type("number") + .validate("\\d+") + .value(123), + new Select() + .name("select-test") + .label("Select Test") + .selectOptions(["A", "B", "C"]) + .value("B"), + new WidgetArray() + .content([ + new Input() + .name("textbox-test") + .label("Only Alpha") + .type("text") + .validate("^[A-Za-z]+$") + .value("SomeString"), + new CheckBox() + .name("checkbox-test") + .label("Checkbox Test") + .value(true), + new Radio() + .name("radio-test") + .label("Radio Test") + .value(true), + new Button() + .name("button-test") + .value("Button Test") + ]), + new TextArea() + .minHeight(64) + .rows(10) + .name("textarea-test") + .label("Textarea Test") + .value("Textarea Text") + , + new ColorInput() + .name("color-input-test") + .label("Color Input Test"), + new Slider() + .columns(data.Slider.simple.columns) + .data(data.Slider.simple.data) + ] + )); + break; + case Input: + break; + case InputRange: + break; + case OnOff: + break; + case Range: + break; + case Select: + break; + case TextArea: + break; + case Slider: + break; + + default: + it("Has render test", () => { + expect(false).to.be.true; + }); + } + } + }); + } + } + } +}); diff --git a/packages/form/tsconfig.json b/packages/form/tsconfig.json index f0f5dccce5..3cd3be3a69 100644 --- a/packages/form/tsconfig.json +++ b/packages/form/tsconfig.json @@ -1,22 +1,25 @@ { - "extends": "../tsconfig.settings.json", "compilerOptions": { - "rootDir": "./src", - "outDir": "./lib-umd", - "declarationDir": "./types", + "rootDir": "src", + "module": "NodeNext", + "target": "ESNext", + "resolveJsonModule": true, + "emitDeclarationOnly": true, + "declaration": true, + "declarationDir": "types", + "strict": false, + "noImplicitAny": false, + "noImplicitThis": false, + "strictNullChecks": false, + "skipLibCheck": true, + "allowImportingTsExtensions": true, + "lib": [ + "DOM", + "ESNext", + "ES2020" + ] }, "include": [ - "./src/**/*" - ], - "references": [ - { - "path": "../api" - }, - { - "path": "../chart" - }, - { - "path": "../common" - } + "./src/index.ts" ] } \ No newline at end of file diff --git a/packages/form/vitest.workspace.ts b/packages/form/vitest.workspace.ts new file mode 100644 index 0000000000..fa7bb0720b --- /dev/null +++ b/packages/form/vitest.workspace.ts @@ -0,0 +1,6 @@ +import { defineWorkspace } from 'vitest/config'; +import baseWorkspace from '../../vitest.workspace.ts'; + +export default defineWorkspace([ + ...baseWorkspace +]) \ No newline at end of file diff --git a/packages/layout/src/ChartPanel.ts b/packages/layout/src/ChartPanel.ts index bb3afc997e..6278d12f44 100644 --- a/packages/layout/src/ChartPanel.ts +++ b/packages/layout/src/ChartPanel.ts @@ -10,7 +10,7 @@ import { Modal } from "./Modal.ts"; import "../src/ChartPanel.css"; -export class ChartPanel extends Border2 implements IHighlight { +export class ChartPanel extends Border2 implements IHighlight { protected _legend = new Legend(this).enableOverflow(true); protected _progressBar = new ProgressBar(); @@ -98,7 +98,7 @@ export class ChartPanel extends Border2 implements IHighlight { protected _carousel = new Carousel(); protected _table = new Table(); - protected _widget: Widget; + protected _widget: T; protected _hideLegendToggleList = ["dgrid_Table"]; @@ -287,7 +287,7 @@ export class ChartPanel extends Border2 implements IHighlight { update(domNode, element) { super.update(domNode, element); if (this._table && this.widget_exists() && this.widget().class().indexOf("chart_XYAxis") >= 0) { - const chart = this.widget() as XYAxis; + const chart = this.widget() as unknown as XYAxis; this._table.columns().forEach((column, idx) => { switch (idx === 0 ? chart.xAxisType() : chart.yAxisType()) { case "linear": @@ -533,7 +533,7 @@ export class ChartPanel extends Border2 implements IHighlight { } ChartPanel.prototype._class += " layout_ChartPanel"; -export interface ChartPanel { +export interface ChartPanel { title(): string; title(_: string): this; titleVisible(): boolean; @@ -568,8 +568,8 @@ export interface ChartPanel { description(): string; description(_: string): this; description_exists(): boolean; - widget(): Widget; - widget(_: Widget): this; + widget(): T; + widget(_: T): this; widget_exists(): boolean; enableAutoscaling(): boolean; enableAutoscaling(_: boolean): this;