jtsx-loader 0.1.0

package/example/styles/default.css

@@ -0,0 +1,231 @@
+body {
+    font-family: Raleway, Arial, Helvetica, sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 1.5;
+    font-size: 16px;
+    color: #fff;
+    background-color: #151515;
+    padding: 40px 80px;
+}
+
+h1, h2, h3, h4 {
+    font-weight: 600;
+    font-style: normal;
+    margin: 10px 0;
+}
+
+h1 {
+    font-size: 42px;
+}
+
+h1 small {
+    font-size: 14px;
+    display: inline-block;
+    vertical-align: top;
+    font-weight: normal;
+}
+
+h2 {
+    font-size: 36px;
+    margin-top: 40px;
+}
+
+h2:nth-of-type(n + 2) {
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+h3 {
+    padding: 10px 20px;
+    border-radius: 8px;
+    background-color: #000;
+    margin-left: -20px;
+
+    font-size: 28px;
+}
+
+h4 {
+    padding: 8px 20px;
+    border-radius: 8px;
+    background-color: #000;
+    margin-left: -20px;
+
+    font-size: 20px;
+    /* letter-spacing: 0.5px; */
+    /* text-transform: uppercase; */
+    margin-top: 50px;
+}
+
+h3:nth-of-type(n + 2) {
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+code {
+    font-size: 16px;
+    padding: 3px 5px;
+    border-radius: 4px;
+    background-color: #02c;
+}
+
+pre {
+    margin: 5px 0;
+    padding: 7px 10px;
+    border-radius: 8px;
+    background-color: #1e213a;
+}
+
+p {
+    margin: 14px 0;
+}
+
+section {
+}
+
+a {
+    color: #fff;
+}
+
+main {
+    display: flex;
+    justify-content: center;
+}
+
+.container {
+    max-width: 800px;
+}
+
+.lang a {
+    color: #fff;
+    display: inline-block;
+    text-decoration: none;
+    padding: 4px 10px;
+    border-radius: 6px;
+    background-color: #00000000;
+}
+
+.lang a.is-active {
+    pointer-events: none;
+    background-color: #0026e6;
+}
+
+.item {
+    padding: 20px 0;
+    border-radius: 16px;
+    /* background-color: #000; */
+}
+
+.examples {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.svg-icon {
+    width: 100%;
+    height: auto;
+}
+
+@keyframes scaleX {
+    from {
+        transform: scaleX(0);
+    }
+
+    to {
+        transform: scaleX(1);
+    }
+}
+
+@keyframes scaleY {
+    from {
+        transform: scaleY(0);
+    }
+
+    to {
+        transform: scaleY(1);
+    }
+}
+
+.logo {
+    width: 160px;
+	position: relative;
+	display: inline-flex;
+	flex-flow: column nowrap;
+	align-items: flex-end;
+    margin-bottom: 60px;
+}
+
+.logo__link {
+    display: inline-flex;
+    padding-right: 35px;
+    transition: opacity 0.3s;
+}
+
+.logo__visual {
+    line-height: 0;
+    margin-bottom: 4px;
+    position: relative;
+    width: 50px;
+    height: 17px;
+}
+
+.logo__visual::before,
+.logo__visual::after {
+    content: '';
+    position: absolute;
+    transform-origin: center;
+}
+
+.logo__visual::before {
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+    margin-top: -0.5px;
+    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
+    animation: scaleX .5s ease .05s forwards;
+    transform: scaleX(0);
+}
+
+.logo__visual::after {
+    top: 0;
+    left: 50%;
+    height: 100%;
+    width: 1px;
+    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
+    animation: scaleY .5s ease .1s forwards;
+    transform: scaleY(0);
+}
+
+.logo--white svg {
+    fill: #fff;
+}
+
+.logo--white .logo__visual::before {
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
+}
+
+.logo--white .logo__visual::after {
+    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
+}
+
+.component-container {
+    border-radius: 16px;
+    padding: 5px 30px;
+    background-color: hsl(240, 100%, 0%);
+}
+
+.render-count span {
+    font-weight: bold;
+    color: hsl(20, 100%, 50%);
+}
+
+.myClassName {
+    padding: 10px;
+    margin-left: -10px;
+    border: 1px solid #fff;
+    border-top: none;
+    border-bottom: none;
+    border-radius: 8px;
+}

package/example/styles/styles.css

@@ -0,0 +1 @@
+@import url('./default.css');

package/factory/jsxFactory.js

@@ -0,0 +1,137 @@
+import possibleAttributes from './possibleAttributes.js';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import _jsxUtils, { escapeHtml } from './jsxUtils.js';
+
+// WARN: сделать вставку html без аттрибута нельзя, потому что тогда нужно писать новый синтаксис для vscode
+const configUrl = pathToFileURL(path.join(process.cwd(), 'jtsx.config.js'));
+const loadedConfig = (await import(configUrl.href).catch(() => ({}))).default;
+
+let config = {
+    attributeParser: {},
+    ...loadedConfig
+};
+
+// Какие аттрибуты должны быть заменены
+const AttributeMapper = (val) => ({
+        tabIndex: 'tabindex',
+        className: 'class',
+        readOnly: 'readonly',
+    }[val] || val);
+
+const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr'];
+const isVoidElt = (tagName) => voidElements.includes(tagName);
+const spacer = ' ';
+
+const objectIntoAttrs = (object) => {
+    if (!object) return '';
+
+    const attrMap = Object.keys(object).map((attr, i) => {
+        const value = object[attr];
+        let finalValue;
+
+        if (typeof value === 'function') {
+            // TODO: в ошибках показывать файл и возможно строку
+            console.warn(`Inline functions not allowed. Attribute ${attr} will be ignored:`);
+            console.warn(value.toString());
+            return;
+        }
+
+        const customAttr = attr.split(':')?.[0];
+
+        if (customAttr && config?.attributeParser?.[customAttr]) {
+            const customAttrVal = config.attributeParser[customAttr](attr, value);
+            console.assert(attr, `The function "config.attributeParser['${customAttr}']" is expected to return new attribute and value`);
+
+            return spacer + customAttrVal;
+        }
+
+        if (attr === '__raw' || attr === '__escape') {
+            return; // prevent attribute rendering
+        }
+
+        if (attr.toLowerCase() === 'classname') {
+            attr = 'class';
+        }
+
+        if (possibleAttributes[attr] && possibleAttributes[attr] !== attr) {
+            console.warn(`Warning! Replace "${attr}" with native html property "${possibleAttributes[attr]}"`);
+        }
+
+        if (attr === 'style' && typeof value === 'object') {
+            finalValue = Object.keys(value).map((key, i) => {
+                const v = value[key];
+                return `${key}: ${v};`;
+            }).join(' ');
+        } else {
+            finalValue = value;
+        }
+
+        if (!finalValue) {
+            return;
+        }
+
+        const result = spacer + `${attr}="${finalValue}"`;
+
+        return result;
+    })
+        .filter(a => a);
+
+    return attrMap;
+}
+
+const joinChildrens = (children) => {
+    return children.map(c => {
+        if (Array.isArray(c)) {
+            return c.join(spacer);
+        }
+
+        return c;
+    }).filter(c => c !== false)
+}
+
+const createTag = (tagName, attrs, children) => {
+    const attributes = objectIntoAttrs(attrs);
+    const tagArray = [
+        '<',
+        tagName,
+        ...attributes
+    ]
+
+    tagArray.push(isVoidElt(tagName) ? '/>' : '>');
+    tagArray.push(...joinChildrens(children));
+
+    if (attrs?.__raw) { tagArray.push(attrs.__raw) }
+
+    if (attrs?.__escape) { tagArray.push(escapeHtml(attrs.__escape)) }
+
+    !isVoidElt(tagName) && tagArray.push('</' + tagName + '>');
+
+    const result = tagArray.join('');
+
+    return result;
+}
+
+const _jsx = (tagName, attrs, ...children) => {
+    try {
+        if (typeof tagName === 'function') {
+            return tagName({ ...attrs, children: children.length === 1 ? children[0] : children });
+        }
+
+        const tag = createTag(tagName, attrs, children);
+        return tag;
+    } catch (error) {
+        throw new Error(error);
+    }
+}
+
+const _jsxFragment = ({ children, ...attrs }) => {
+    return children.join(' ');
+}
+
+/* export {
+    DOMcreateElement as h,
+    DOMcreateFragment as Fragment,
+} */
+
+export { _jsx, _jsxFragment, _jsxUtils }

package/factory/jsxUtils.js

@@ -0,0 +1,18 @@
+const entityMap = {
+    "&": 'amp',
+    "<": 'lt',
+    ">": 'gt',
+    '"': 'quot',
+    "'": '#39',
+    "/": '#x2F',
+};
+
+const escapeHtml = (str) => String(str).replace(/[&<>"'\/\\]/g, (s) => `&${entityMap[s]};`);
+
+export default {
+    escapeHtml
+}
+
+export {
+    escapeHtml
+}