mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Refactored JSX factory and added typings
This commit is contained in:
squidfunk
parent
2f3e7e4515
commit
82fddbad77
2
Makefile
2
Makefile
@ -46,7 +46,7 @@ lint:
|
||||
# Start development server
|
||||
start:
|
||||
@ NODE_ENV=development ${BIN}/nodemon --quiet \
|
||||
--watch src --ext html,scss,ts \
|
||||
--watch src --ext html,scss,ts,tsx \
|
||||
--exec make build
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
|
||||
48
package-lock.json
generated
48
package-lock.json
generated
@ -2166,11 +2166,6 @@
|
||||
"array-find-index": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"custom-event-polyfill": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
|
||||
"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
|
||||
},
|
||||
"cyclist": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
||||
@ -4747,11 +4742,6 @@
|
||||
"integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
|
||||
"dev": true
|
||||
},
|
||||
"js-cookie": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
|
||||
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
|
||||
@ -5704,6 +5694,16 @@
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"null-loader": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/null-loader/-/null-loader-3.0.0.tgz",
|
||||
"integrity": "sha512-hf5sNLl8xdRho4UPBOOeoIwT3WhjYcMUQm0zj44EhD6UscMAz72o2udpoDFBgykucdEDGIcd6SXbc/G6zssbzw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"schema-utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"num2fraction": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||
@ -6495,6 +6495,12 @@
|
||||
"integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==",
|
||||
"dev": true
|
||||
},
|
||||
"preact": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.1.1.tgz",
|
||||
"integrity": "sha512-mKW7Cdn68XMhdes0FjyIbA8+IVPsj3aIuAEQlZVkj9E2VhujWcXZEfwirBoXK6qZYfj1djaTBDCFKjAu1sK93w==",
|
||||
"dev": true
|
||||
},
|
||||
"prepend-http": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
|
||||
@ -9557,28 +9563,6 @@
|
||||
"errno": "~0.1.7"
|
||||
}
|
||||
},
|
||||
"worker-loader": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
|
||||
"integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.0.0",
|
||||
"schema-utils": "^0.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"schema-utils": {
|
||||
"version": "0.4.7",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
|
||||
"integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "^6.1.0",
|
||||
"ajv-keywords": "^3.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
|
||||
|
||||
@ -31,9 +31,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"clipboard": "^2.0.0",
|
||||
"custom-event-polyfill": "^1.0.7",
|
||||
"escape-html": "^1.0.3",
|
||||
"js-cookie": "^2.2.1",
|
||||
"lunr": "^2.3.6",
|
||||
"lunr-languages": "^1.1.0",
|
||||
"lz-string": "^1.4.4",
|
||||
@ -56,7 +54,9 @@
|
||||
"modularscale-sass": "^3.0.10",
|
||||
"node-sass": "^4.12.0",
|
||||
"nodemon": "^1.19.2",
|
||||
"null-loader": "^3.0.0",
|
||||
"postcss-cli": "^6.1.3",
|
||||
"preact": "^10.1.1",
|
||||
"stylelint": "^11.0.0",
|
||||
"stylelint-config-standard": "^19.0.0",
|
||||
"stylelint-order": "^3.1.1",
|
||||
|
||||
@ -55,7 +55,7 @@ export type ComponentMap = {
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Function types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
|
||||
@ -32,7 +32,7 @@ import { ViewportOffset, ViewportSize } from "../../../utilities"
|
||||
import { Header } from "../_"
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Function types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
|
||||
@ -45,7 +45,7 @@ export interface Main {
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Function types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
|
||||
@ -59,7 +59,7 @@ export interface Sidebar {
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Function types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
|
||||
@ -20,4 +20,5 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
export * from "./jsx"
|
||||
export * from "./rxjs"
|
||||
|
||||
@ -20,11 +20,52 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import { JSX as JSXInternal } from "preact"
|
||||
import { keys } from "ramda"
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* HTML attributes
|
||||
*/
|
||||
type Attributes =
|
||||
& JSXInternal.HTMLAttributes
|
||||
& JSXInternal.SVGAttributes
|
||||
& Record<string, any>
|
||||
|
||||
/**
|
||||
* Child element
|
||||
*/
|
||||
type Child = Child[] | Element | Text | string | number
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Helper functions
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Append a child node to an element
|
||||
*
|
||||
* @param el - Element
|
||||
* @param child - Child node
|
||||
*/
|
||||
function appendChild(el: Element, child: Child): void {
|
||||
|
||||
/* Handle primitive types */
|
||||
if (typeof child === "string" || typeof child === "number") {
|
||||
el.appendChild(new Text(child.toString()))
|
||||
|
||||
/* Handle nodes */
|
||||
} else if (child instanceof Node) {
|
||||
el.appendChild(child)
|
||||
|
||||
/* Handle nested children */
|
||||
} else if (Array.isArray(child)) {
|
||||
for (const node of child)
|
||||
appendChild(el, node)
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Functions
|
||||
@ -33,52 +74,38 @@
|
||||
/**
|
||||
* JSX factory
|
||||
*
|
||||
* @param tag - Tag name
|
||||
* @param attributes - Properties
|
||||
* @param tag - HTML tag
|
||||
* @param attributes - HTML attributes
|
||||
* @param children - Child elements
|
||||
*
|
||||
* @return Element
|
||||
*/
|
||||
export function h(
|
||||
tag: string,
|
||||
attributes: Record<string, string | boolean> | null,
|
||||
...children: Array<Element | Text | string>
|
||||
tag: string, attributes: Attributes | null,
|
||||
...children: Array<Element | Text | string | number>
|
||||
) {
|
||||
console.log(tag, attributes, children)
|
||||
// const el = document.createElement(tag)
|
||||
const el = document.createElement(tag)
|
||||
|
||||
// /* Set all properties */
|
||||
// if (attributes)
|
||||
// Array.prototype.forEach.call(Object.keys(attributes), attr => {
|
||||
// el.setAttribute(attr, attributes[attr])
|
||||
// })
|
||||
/* Set attributes, if any */
|
||||
if (attributes)
|
||||
for (const attr of keys(attributes))
|
||||
if (typeof attributes[attr] !== "boolean")
|
||||
el.setAttribute(attr, attributes[attr])
|
||||
else if (attributes[attr])
|
||||
el.setAttribute(attr, "")
|
||||
|
||||
// /* Iterate child nodes */
|
||||
// const iterateChildNodes = nodes => {
|
||||
// Array.prototype.forEach.call(nodes, node => {
|
||||
/* Append child nodes */
|
||||
for (const child of children)
|
||||
appendChild(el, child)
|
||||
|
||||
// /* Directly append text content */
|
||||
// if (typeof node === "string" ||
|
||||
// typeof node === "number") {
|
||||
// el.textContent += node
|
||||
|
||||
// /* Recurse, if we got an array */
|
||||
// } else if (Array.isArray(node)) {
|
||||
// iterateChildNodes(node)
|
||||
|
||||
// /* Append raw HTML */
|
||||
// } else if (typeof node.__html !== "undefined") {
|
||||
// el.innerHTML += node.__html
|
||||
|
||||
// /* Append regular nodes */
|
||||
// } else if (node instanceof Node) {
|
||||
// el.appendChild(node)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// /* Iterate child nodes and return element */
|
||||
// iterateChildNodes(children)
|
||||
// return el
|
||||
return { tag }
|
||||
/* Return element */
|
||||
return el
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Namespace
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
export declare namespace h {
|
||||
export import JSX = JSXInternal
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ import {
|
||||
} from "rxjs/operators"
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Function types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
|
||||
@ -36,7 +36,7 @@ export interface WorkerMessage {
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Function types
|
||||
* Helper types
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
|
||||
@ -272,8 +272,8 @@
|
||||
{% endif %}
|
||||
|
||||
<!-- Main area -->
|
||||
<main class="md-main" role="main">
|
||||
<div class="md-main__inner md-grid" data-md-component="main">
|
||||
<main class="md-main" data-md-component="main">
|
||||
<div class="md-main__inner md-grid">
|
||||
|
||||
<!-- Navigation -->
|
||||
{% block site_nav %}
|
||||
@ -443,7 +443,10 @@
|
||||
<script>
|
||||
app = initialize({
|
||||
base: "{{ base_url }}",
|
||||
search: "{{ 'assets/javascripts/search.js' | url }}"
|
||||
worker: {
|
||||
search: "{{ 'assets/javascripts/search.js' | url }}",
|
||||
packer: "{{ 'assets/javascripts/packer.js' | url }}"
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
"declarationMap": false,
|
||||
"downlevelIteration": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "jsx.h",
|
||||
"jsxFactory": "h",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2017",
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
*/
|
||||
|
||||
import * as path from "path"
|
||||
import { Configuration, ProvidePlugin } from "webpack"
|
||||
import { Configuration } from "webpack"
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Helper functions
|
||||
@ -58,6 +58,12 @@ function config(args: Configuration): Configuration {
|
||||
}
|
||||
],
|
||||
exclude: /\/node_modules\//
|
||||
},
|
||||
|
||||
/* Preact is only used for its great JSX typings */
|
||||
{
|
||||
test: /\bpreact\b/,
|
||||
use: "null-loader"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -98,12 +104,7 @@ export default (_env: never, args: Configuration): Configuration[] => ([
|
||||
path: path.resolve(__dirname, "material/assets/javascripts"),
|
||||
filename: "bundle.js",
|
||||
libraryTarget: "window"
|
||||
},
|
||||
plugins: [
|
||||
new ProvidePlugin({
|
||||
jsx: "src/assets/javascripts/extensions/jsx"
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
/* Search worker */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user