From be9001e5db7728a3970555744135b82f66a595c0 Mon Sep 17 00:00:00 2001 From: Nico Jansen Date: Thu, 27 Jun 2019 08:04:34 +0200 Subject: [PATCH 1/4] feat(browser): support browsers as well as node Use direct es import `import typedHtml from './node_modules/typed-html/dist/elements.js' or use a bare import (`import typedHtml from 'typed-html'`) with a bundler like rollup. BREAKING CHANGE: emitted new lines in strings are no longer platform dependent. `\n` is now always used. --- .gitignore | 4 +- .npmignore | 1 + .vscode/settings.json | 3 +- package.json | 5 +- src/elements.tsx | 12 +- .../{element-types.ts => element-types.d.ts} | 171 ++++++++++-------- src/jsx/{events.ts => events.d.ts} | 31 ++-- ...ic-elements.ts => intrinsic-elements.d.ts} | 7 +- src/tsconfig.json | 7 +- tsconfig.settings.json | 2 +- 10 files changed, 128 insertions(+), 115 deletions(-) rename src/jsx/{element-types.ts => element-types.d.ts} (71%) rename src/jsx/{events.ts => events.d.ts} (78%) rename src/jsx/{intrinsic-elements.ts => intrinsic-elements.d.ts} (97%) diff --git a/.gitignore b/.gitignore index 5e4ec80d..65fd71b6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ node_modules +/dist *.js *.d.ts *.map -*.tsbuildinfo \ No newline at end of file +*.tsbuildinfo +!src/jsx/*.d.ts \ No newline at end of file diff --git a/.npmignore b/.npmignore index 119eca24..cd3c2607 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,5 @@ **/** +!dist/*.?(js|d.ts) !readme.md !src/**/*.js !src/**/*.d.ts \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 8b4b7f9c..3c6beaf7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,7 +10,8 @@ "**/*?.js": { "when": "$(basename).tsx" }, - "**/*.d.ts": true, + "*/*.d.ts": true, + "src/jsx/*.d.ts": false, "**/*.map": true, "**/*.tsbuildinfo": true }, diff --git a/package.json b/package.json index e3ac1ec2..c2a32aeb 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,14 @@ "description": "TypeSafe HTML templates using TypeScript. No need to learn a template library.", "main": "src/elements.js", "typings": "src/elements.d.ts", + "module": "dist/elements.js", "repository": { "type": "git", "url": "https://github.com/nicojs/typed-html" }, "scripts": { - "prebuild": "rimraf \"+(test|src)/**/*.+(js|map|tsbuildinfo|d.ts)\" dist", - "build": "tsc -b", + "prebuild": "rimraf \"+(test|src)/*.+(js|map|tsbuildinfo|d.ts)\" dist", + "build": "tsc -b && tsc -p src --outDir dist --module esnext --target esnext", "pretest": "npm run build", "test": "mocha", "preversion": "npm test", diff --git a/src/elements.tsx b/src/elements.tsx index fc6acd8f..3aebca89 100644 --- a/src/elements.tsx +++ b/src/elements.tsx @@ -1,8 +1,6 @@ -/// -/// -/// - -import * as os from 'os'; +/// +/// +/// type AttributeValue = number | string | Date | boolean; @@ -79,8 +77,8 @@ const attributesToString = (attributes: Attributes | undefined): string => { const contentsToString = (contents: any[] | undefined) => { if (contents) { return contents - .map(elements => Array.isArray(elements) ? elements.join(os.EOL) : elements) - .join(os.EOL); + .map(elements => Array.isArray(elements) ? elements.join('\n') : elements) + .join('\n'); } else { return ''; } diff --git a/src/jsx/element-types.ts b/src/jsx/element-types.d.ts similarity index 71% rename from src/jsx/element-types.ts rename to src/jsx/element-types.d.ts index d688fdff..7f41dc5a 100644 --- a/src/jsx/element-types.ts +++ b/src/jsx/element-types.d.ts @@ -1,7 +1,4 @@ declare namespace JSX { - - // Source: https://dev.w3.org/html5/html-author/#the-elements - interface HtmlTag { accesskey?: string; class?: string; @@ -18,7 +15,6 @@ declare namespace JSX { title?: string; translate?: string | boolean; } - interface HtmlAnchorTag extends HtmlTag { href?: string; target?: string; @@ -29,8 +25,6 @@ declare namespace JSX { hreflang?: string; type?: string; } - - interface HtmlAreaTag extends HtmlTag { alt?: string; coords?: string; @@ -43,7 +37,6 @@ declare namespace JSX { hreflang?: string; type?: string; } - interface HtmlAudioTag extends HtmlTag { src?: string; autobuffer?: string; @@ -51,7 +44,6 @@ declare namespace JSX { loop?: string; controls?: string; } - interface BaseTag extends HtmlTag { href?: string; target?: string; @@ -59,10 +51,8 @@ declare namespace JSX { interface HtmlQuoteTag extends HtmlTag { cite?: string; } - interface HtmlBodyTag extends HtmlTag { } - interface HtmlButtonTag extends HtmlTag { action?: string; autofocus?: string; @@ -76,56 +66,65 @@ declare namespace JSX { type?: string; value?: string; } - interface HtmlDataListTag extends HtmlTag { } - interface HtmlCanvasTag extends HtmlTag { width?: string; height?: string; } - interface HtmlTableColTag extends HtmlTag { span?: string; } - interface HtmlTableSectionTag extends HtmlTag { } - interface HtmlTableRowTag extends HtmlTag { } - interface DataTag extends HtmlTag { value?: string; } interface HtmlEmbedTag extends HtmlTag { - src?: string; type?: string; width?: string; height?: string; + src?: string; + type?: string; + width?: string; + height?: string; [anything: string]: string | boolean | undefined; } - interface HtmlFieldSetTag extends HtmlTag { disabled?: string; form?: string; name?: string; } - interface HtmlFormTag extends HtmlTag { acceptCharset?: string; - action?: string; autocomplete?: string; enctype?: string; method?: string; name?: string; novalidate?: string | boolean; target?: string; + action?: string; + autocomplete?: string; + enctype?: string; + method?: string; + name?: string; + novalidate?: string | boolean; + target?: string; } - interface HtmlHtmlTag extends HtmlTag { manifest?: string; } - interface HtmlIFrameTag extends HtmlTag { - src?: string; srcdoc?: string; name?: string; sandbox?: string; seamless?: string; width?: string; height?: string; + src?: string; + srcdoc?: string; + name?: string; + sandbox?: string; + seamless?: string; + width?: string; + height?: string; } - interface HtmlImageTag extends HtmlTag { - alt?: string; src?: string; crossorigin?: string; usemap?: string; ismap?: string; width?: string; height?: string; + alt?: string; + src?: string; + crossorigin?: string; + usemap?: string; + ismap?: string; + width?: string; + height?: string; } - interface HtmlInputTag extends HtmlTag { accept?: string; action?: string; @@ -157,24 +156,25 @@ declare namespace JSX { value?: string; width?: string; } - interface HtmlModTag extends HtmlTag { cite?: string; datetime?: string | Date; } - interface KeygenTag extends HtmlTag { - autofocus?: string; challenge?: string; disabled?: string; form?: string; keytype?: string; name?: string; + autofocus?: string; + challenge?: string; + disabled?: string; + form?: string; + keytype?: string; + name?: string; } - interface HtmlLabelTag extends HtmlTag { - form?: string; for?: string; + form?: string; + for?: string; } - interface HtmlLITag extends HtmlTag { value?: string | number; } - interface HtmlLinkTag extends HtmlTag { href?: string; crossorigin?: string; @@ -185,18 +185,15 @@ declare namespace JSX { sizes?: string; integrity?: string; } - interface HtmlMapTag extends HtmlTag { name?: string; } - interface HtmlMetaTag extends HtmlTag { name?: string; httpEquiv?: string; content?: string; charset?: string; } - interface HtmlMeterTag extends HtmlTag { value?: string | number; min?: string | number; @@ -205,35 +202,42 @@ declare namespace JSX { high?: string | number; optimum?: string | number; } - interface HtmlObjectTag extends HtmlTag { - data?: string; type?: string; name?: string; usemap?: string; form?: string; width?: string; height?: string; + data?: string; + type?: string; + name?: string; + usemap?: string; + form?: string; + width?: string; + height?: string; } - interface HtmlOListTag extends HtmlTag { - reversed?: string; start?: string | number; + reversed?: string; + start?: string | number; } - interface HtmlOptgroupTag extends HtmlTag { - disabled?: string; label?: string; + disabled?: string; + label?: string; } - interface HtmlOptionTag extends HtmlTag { - disabled?: string; label?: string; selected?: string; value?: string; + disabled?: string; + label?: string; + selected?: string; + value?: string; } - interface HtmlOutputTag extends HtmlTag { - for?: string; form?: string; name?: string; + for?: string; + form?: string; + name?: string; } - interface HtmlParamTag extends HtmlTag { - name?: string; value?: string; + name?: string; + value?: string; } - interface HtmlProgressTag extends HtmlTag { - value?: string | number; max?: string | number; + value?: string | number; + max?: string | number; } - interface HtmlCommandTag extends HtmlTag { type?: string; label?: string; @@ -243,18 +247,15 @@ declare namespace JSX { radiogroup?: string; default?: string; } - - interface HtmlLegendTag extends HtmlTag { } - + interface HtmlLegendTag extends HtmlTag { + } interface HtmlBrowserButtonTag extends HtmlTag { type?: string; } - interface HtmlMenuTag extends HtmlTag { type?: string; label?: string; } - interface HtmlScriptTag extends HtmlTag { src?: string; type?: string; @@ -265,46 +266,67 @@ declare namespace JSX { integrity?: string; text?: string; } - interface HtmlDetailsTag extends HtmlTag { open?: string; } - interface HtmlSelectTag extends HtmlTag { - autofocus?: string; disabled?: string; form?: string; multiple?: string; name?: string; required?: string; size?: string; + autofocus?: string; + disabled?: string; + form?: string; + multiple?: string; + name?: string; + required?: string; + size?: string; } - interface HtmlSourceTag extends HtmlTag { - src?: string; type?: string; media?: string; + src?: string; + type?: string; + media?: string; } - interface HtmlStyleTag extends HtmlTag { - media?: string; type?: string; disabled?: string; scoped?: string; + media?: string; + type?: string; + disabled?: string; + scoped?: string; } - interface HtmlTableTag extends HtmlTag { } - interface HtmlTableDataCellTag extends HtmlTag { - colspan?: string | number; rowspan?: string | number; headers?: string; + colspan?: string | number; + rowspan?: string | number; + headers?: string; } - interface HtmlTextAreaTag extends HtmlTag { - autofocus?: string; cols?: string; dirname?: string; disabled?: string; form?: string; maxlength?: string; minlength?: string; name?: string; placeholder?: string; readonly?: string; required?: string; rows?: string; wrap?: string; + autofocus?: string; + cols?: string; + dirname?: string; + disabled?: string; + form?: string; + maxlength?: string; + minlength?: string; + name?: string; + placeholder?: string; + readonly?: string; + required?: string; + rows?: string; + wrap?: string; } - interface HtmlTableHeaderCellTag extends HtmlTag { - colspan?: string | number; rowspan?: string | number; headers?: string; scope?: string; + colspan?: string | number; + rowspan?: string | number; + headers?: string; + scope?: string; } - interface HtmlTimeTag extends HtmlTag { datetime?: string | Date; } - interface HtmlTrackTag extends HtmlTag { - default?: string; kind?: string; label?: string; src?: string; srclang?: string; + default?: string; + kind?: string; + label?: string; + src?: string; + srclang?: string; } - interface HtmlVideoTag extends HtmlTag { src?: string; poster?: string; @@ -316,3 +338,4 @@ declare namespace JSX { height?: string; } } +//# sourceMappingURL=element-types.d.ts.map \ No newline at end of file diff --git a/src/jsx/events.ts b/src/jsx/events.d.ts similarity index 78% rename from src/jsx/events.ts rename to src/jsx/events.d.ts index 4537ac40..ff44838d 100644 --- a/src/jsx/events.ts +++ b/src/jsx/events.d.ts @@ -1,8 +1,4 @@ declare namespace JSX { - - // http://htmlcss.wikia.com/wiki/HTML5_Event_Attributes - - // Only used in the element to specify events triggered for a window object. interface HtmlBodyTag { onafterprint?: string; onbeforeprint?: string; @@ -23,9 +19,7 @@ declare namespace JSX { onstorage?: string; onundo?: string; onunload?: string; - } - interface HtmlTag { oncontextmenu?: string; onkeydown?: string; @@ -48,8 +42,6 @@ declare namespace JSX { onmousewheel?: string; onscroll?: string; } - - // Applies to all HTML5 elements, but is most common in