@magic/tags 0.0.11 → 0.0.13

package/README.md

@@ -23,6 +23,7 @@ exports arrays of html and svg elements.
 [snyk-url]: https://snyk.io/test/github/magic/tags
 
 #### installation:
+
 ```javascript
   npm install @magic/tags
 ```
@@ -30,51 +31,74 @@ exports arrays of html and svg elements.
 #### usage:
 
 ##### import
+
 ```javascript
 import { bodyTags, headTags, svgTags, tags } from '@magic/tags'
 
 console.log(bodyTags) // prints all html body tags
 console.log(headTags) // prints all html elements that can only appear outside of the body
-console.log(svgTags)  // prints all svg elements
-console.log(tags)     // prints all of the above
+console.log(svgTags) // prints all svg elements
+console.log(tags) // prints all of the above
 ```
 
 #### changelog
 
 ##### 0.0.1
+
 first commit
 
 ##### 0.0.2
+
 remove color-profile and switch tags from svg
 
 ##### 0.0.3
+
 required node version is >= 13.5.0
 
 ##### 0.0.4
+
 bump required node version to 14.2.0
 
 ##### 0.0.5
+
 bump required node version to 14.15.4
 
 ##### 0.0.6
+
 add <picture> element
 
 ##### 0.0.7
-* update @magic/test
-* add type: module to package.json
+
+- update @magic/test
+- add type: module to package.json
 
 ##### 0.0.8
+
 update dependencies
 
 ##### 0.0.9
+
 update dependencies
 
 ##### 0.0.10
-* update dependencies
-* add self-closing tag array
+
+- update dependencies
+- add self-closing tag array
 
 ##### 0.0.11
+
 update dependencies
 
-##### 0.0.12 - unreleased
+##### 0.0.12
+
+update dependencies
+
+##### 0.0.13
+
+- add types
+- fix test/spec
+- update dependencies
+
+##### 0.0.14 - unreleased
+
 ...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic/tags",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "author": "Wizards & Witches",
   "description": "exports arrays of all html and svg tags.",
   "license": "AGPL-3.0",
@@ -8,7 +8,9 @@
   "type": "module",
   "scripts": {
     "start": "t -p",
-    "build": "NODE_ENV=production magic build",
+    "build": "npm run build:docs && npm run test && tsc && npm run format",
+    "build:docs": "NODE_ENV=production magic build",
+    "prepublishOnly": "npm run build",
     "prod": "NODE_ENV=production magic build serve --watch src",
     "clean": "magic clean",
     "serve": "magic serve",
@@ -18,7 +20,8 @@
     "calls": "calls"
   },
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "engines": {
     "node": ">=14.15.4"
@@ -31,15 +34,17 @@
   "bugs": {
     "url": "https://github.com/magic/tags/issues"
   },
-  "main": "src/index.mjs",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
   "devDependencies": {
-    "@magic-modules/light-switch": "0.0.11",
-    "@magic-modules/no-spy": "0.0.7",
-    "@magic-modules/pre": "0.0.11",
-    "@magic-themes/docs": "0.0.14",
-    "@magic/core": "0.0.140",
-    "@magic/format": "0.0.40",
-    "@magic/test": "0.2.11"
+    "@magic-modules/light-switch": "0.0.12",
+    "@magic-modules/no-spy": "0.0.9",
+    "@magic-modules/pre": "0.0.12",
+    "@magic-themes/docs": "0.0.15",
+    "@magic/core": "0.0.156",
+    "@magic/format": "0.0.68",
+    "@magic/test": "0.2.20",
+    "typescript": "5.9.3"
   },
   "keywords": [
     "html",

package/src/{index.mjs → index.js}

@@ -4,7 +4,7 @@
 // svg element list and docs extracted from
 // https://developer.mozilla.org/en-US/docs/Web/SVG/Element
 
-export const selfClosing = [
+export const selfClosing = /** @type {const} */ ([
   'area', //  - HTML area tag defines an area in an image based on coordinates which then accepts an URL and become a clickable area behaving like a hyperlink
   'base', //  - It defines the base URL for all the relative URLs in the document
   'br', //  - br is used to create a line break
@@ -12,15 +12,16 @@ export const selfClosing = [
   'embed', //  - It is used to embed external content on the webpage
   'hr', //  - It creates a horizontal line
   'img', //  - It is used to define an image
+  'input', //  - It is used to create input fields in forms
   'link', //  - It is mostly used to add external stylesheets to the HTML document
   'meta', //  - It is used to give metadata to the webpage
   'param', //  - It defines parameter to the object
   'source', //  - It is used to give multiple media of resources for audio, video, and pictures
   'track', //  - It is used in media files to provide times text tracks
   'wbr', // - It provides a word break position in a paragraph for the browsers
-]
+])
 
-export const bodyTags = [
+export const bodyTags = /** @type {const} */ ([
   // Represents a hyperlink (the link that a user clicks on to go to another web page or document).
   'a',
   // Represents an abbreviation
@@ -85,6 +86,8 @@ export const bodyTags = [
   'em',
   // Represents external application or interactive content. The embed tag was introduced in HTML5 (although browsers have supported it since long before HTML5).
   'embed',
+  // Represents a fenced frame for embedded content with enhanced privacy. This is a newer HTML element.
+  'fencedframe',
   // Represents a fieldset
   'fieldset',
   // Represents caption for the 'code',figure'/code', element. The figcaption tag is new in HTML5.
@@ -138,6 +141,10 @@ export const bodyTags = [
   'map',
   // Represents marked text. This tag was introduced in HTML5.
   'mark',
+  // Represents a MathML mathematical expression
+  'math',
+  // Represents a menu of commands
+  'menu',
   // Represents measurement within a predefined range. This element is new in HTML5.
   'meter',
   // Represents navigation links. This tag was introduced in HTML5.
@@ -158,6 +165,8 @@ export const bodyTags = [
   'p',
   // Represents a parameter for an object
   'param',
+  // Represents a picture element for responsive images
+  'picture',
   // Represents preformatted text
   'pre',
   // Represents progress of a task of any kind. This element was introduced in HTML5.
@@ -180,10 +189,16 @@ export const bodyTags = [
   'samp',
   // Represents a script
   'script',
+  // Represents a search functionality container. This is a newer HTML element.
+  'search',
   // Represents a section. This tag is new in HTML5.
   'section',
   // Represents a selectable list
   'select',
+  // Represents the selected content inside a select element. This is a newer element.
+  'selectedcontent',
+  // Represents a slot in web components for shadow DOM
+  'slot',
   // Represents small text
   'small',
   // Represents media resources. This HTML element is new in HTML5.
@@ -227,15 +242,14 @@ export const bodyTags = [
   // Represents an unordered list
   'ul',
   // Represents a variable
-  // Breaks the build (of course)
-  //~ 'var',
+  'var',
   // Represents a video. The video element is new in HTML5.
   'video',
   // Represents a line break 'i',opportunity'/i', for very long words and strings of text with no spaces. This tag is new in HTML5.
   'wbr',
-]
+])
 
-export const headTags = [
+export const headTags = /** @type {const} */ ([
   // Represents a base URL for all the links in a page
   'base',
   // Represents information about the document
@@ -248,9 +262,9 @@ export const headTags = [
   'meta',
   // Represents the document title
   'title',
-]
+])
 
-export const svgTags = [
+export const svgTags = /** @type {const} */ ([
   // The <a> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
   'a',
   // This element implements the SVGAnimateElement interface.
@@ -264,8 +278,7 @@ export const svgTags = [
   // The <clipPath> SVG element defines a clipping path. A clipping path is used/referenced using the clip-path property.
   'clipPath',
   // The <color-profile> element allows describing the color profile used for the image.
-  // DOES NOT CONFORM TO HTML ELEMENT NAMES. DISABLED
-  // 'color-profile',
+  'color-profile',
   // The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example).
   'defs',
   // Each container element or graphics element in an SVG drawing can supply a description string using the <desc> element where the description is text-only.
@@ -381,8 +394,7 @@ export const svgTags = [
   // The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of any SVG document but it can also be used to embed a SVG fragment inside any SVG or HTML document.
   'svg',
   // The <switch> SVG element evaluates the requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a <g>, then the entire subtree is either processed/rendered or bypassed/not rendered.
-  // Object.switch breaks javascript
-  // 'switch',
+  'switch',
   // The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.
   'symbol',
   // The SVG <text> element defines a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, just like any other SVG graphics element.
@@ -398,7 +410,7 @@ export const svgTags = [
   'use',
   // A view is a defined way to view the image, like a zoom level or a detail view.
   'view',
-]
+])
 
 export const tags = [...headTags, ...bodyTags, ...svgTags]
 

package/types/index.d.ts

@@ -0,0 +1,397 @@
+export const selfClosing: readonly [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]
+export const bodyTags: readonly [
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fencedframe',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'math',
+  'menu',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rb',
+  'rp',
+  'rt',
+  'rtc',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'search',
+  'section',
+  'select',
+  'selectedcontent',
+  'slot',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
+]
+export const headTags: readonly ['base', 'head', 'html', 'link', 'meta', 'title']
+export const svgTags: readonly [
+  'a',
+  'animate',
+  'animateMotion',
+  'animateTransform',
+  'circle',
+  'clipPath',
+  'color-profile',
+  'defs',
+  'desc',
+  'discard',
+  'ellipse',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence',
+  'filter',
+  'foreignObject',
+  'g',
+  'hatch',
+  'hatchpath',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'mesh',
+  'meshgradient',
+  'meshpatch',
+  'meshrow',
+  'metadata',
+  'mpath',
+  'path',
+  'pattern',
+  'picture',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  'script',
+  'set',
+  'solidcolor',
+  'stop',
+  'style',
+  'svg',
+  'switch',
+  'symbol',
+  'text',
+  'textPath',
+  'title',
+  'tspan',
+  'unknown',
+  'use',
+  'view',
+]
+export const tags: (
+  | 'symbol'
+  | 'object'
+  | 'search'
+  | 'link'
+  | 'small'
+  | 'sub'
+  | 'sup'
+  | 'map'
+  | 'filter'
+  | 'input'
+  | 'set'
+  | 'base'
+  | 'code'
+  | 'data'
+  | 'time'
+  | 'progress'
+  | 'stop'
+  | 'track'
+  | 'source'
+  | 'button'
+  | 'address'
+  | 'unknown'
+  | 'view'
+  | 'discard'
+  | 'clipPath'
+  | 'marker'
+  | 'mask'
+  | 'a'
+  | 'abbr'
+  | 'area'
+  | 'article'
+  | 'aside'
+  | 'audio'
+  | 'b'
+  | 'bdi'
+  | 'bdo'
+  | 'blockquote'
+  | 'body'
+  | 'br'
+  | 'canvas'
+  | 'caption'
+  | 'cite'
+  | 'col'
+  | 'colgroup'
+  | 'datalist'
+  | 'dd'
+  | 'del'
+  | 'details'
+  | 'dfn'
+  | 'dialog'
+  | 'div'
+  | 'dl'
+  | 'dt'
+  | 'em'
+  | 'embed'
+  | 'fieldset'
+  | 'figcaption'
+  | 'figure'
+  | 'footer'
+  | 'form'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'head'
+  | 'header'
+  | 'hgroup'
+  | 'hr'
+  | 'html'
+  | 'i'
+  | 'iframe'
+  | 'img'
+  | 'ins'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'mark'
+  | 'menu'
+  | 'meta'
+  | 'meter'
+  | 'nav'
+  | 'noscript'
+  | 'ol'
+  | 'optgroup'
+  | 'option'
+  | 'output'
+  | 'p'
+  | 'picture'
+  | 'pre'
+  | 'q'
+  | 'rp'
+  | 'rt'
+  | 'ruby'
+  | 's'
+  | 'samp'
+  | 'script'
+  | 'section'
+  | 'select'
+  | 'slot'
+  | 'span'
+  | 'strong'
+  | 'style'
+  | 'summary'
+  | 'table'
+  | 'tbody'
+  | 'td'
+  | 'template'
+  | 'textarea'
+  | 'tfoot'
+  | 'th'
+  | 'thead'
+  | 'title'
+  | 'tr'
+  | 'u'
+  | 'ul'
+  | 'var'
+  | 'video'
+  | 'wbr'
+  | 'param'
+  | 'rb'
+  | 'rtc'
+  | 'animate'
+  | 'animateMotion'
+  | 'animateTransform'
+  | 'circle'
+  | 'defs'
+  | 'desc'
+  | 'ellipse'
+  | 'feBlend'
+  | 'feColorMatrix'
+  | 'feComponentTransfer'
+  | 'feComposite'
+  | 'feConvolveMatrix'
+  | 'feDiffuseLighting'
+  | 'feDisplacementMap'
+  | 'feDistantLight'
+  | 'feDropShadow'
+  | 'feFlood'
+  | 'feFuncA'
+  | 'feFuncB'
+  | 'feFuncG'
+  | 'feFuncR'
+  | 'feGaussianBlur'
+  | 'feImage'
+  | 'feMerge'
+  | 'feMergeNode'
+  | 'feMorphology'
+  | 'feOffset'
+  | 'fePointLight'
+  | 'feSpecularLighting'
+  | 'feSpotLight'
+  | 'feTile'
+  | 'feTurbulence'
+  | 'foreignObject'
+  | 'g'
+  | 'image'
+  | 'line'
+  | 'linearGradient'
+  | 'metadata'
+  | 'mpath'
+  | 'path'
+  | 'pattern'
+  | 'polygon'
+  | 'polyline'
+  | 'radialGradient'
+  | 'rect'
+  | 'svg'
+  | 'switch'
+  | 'text'
+  | 'textPath'
+  | 'tspan'
+  | 'use'
+  | 'math'
+  | 'fencedframe'
+  | 'selectedcontent'
+  | 'color-profile'
+  | 'hatch'
+  | 'hatchpath'
+  | 'mesh'
+  | 'meshgradient'
+  | 'meshpatch'
+  | 'meshrow'
+  | 'solidcolor'
+)[]
+export default tags