diff --git a/.prettierrc b/.prettierrc index 544138b..85b1406 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,5 @@ { - "singleQuote": true + "singleQuote": true, + "tabWidth": 2, + "useTabs": false } diff --git a/server.ts b/server.ts index dff5ead..c31b578 100644 --- a/server.ts +++ b/server.ts @@ -25,7 +25,8 @@ const devServer = (req: express.Request, res: express.Response) => { let name = req.url; if (name == "" || name == "/") name = "index.html"; if (name.endsWith(".ts") || name.endsWith(".tsx")) { - res.status(500); + res.status(400); + res.send(); return; } const method = req.method; diff --git a/src/App.tsx b/src/App.tsx index c65dfeb..ad0bd4e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,113 +1,15 @@ -const app = ( - <> -
- -
- -
- - -
-
-
-
- Апокалипсис -
-
- -
-
-
-
-
- -); +RenderJSX(appRoot, app); diff --git a/src/chunks/navbar.tsx b/src/chunks/navbar.tsx new file mode 100644 index 0000000..b17cb2f --- /dev/null +++ b/src/chunks/navbar.tsx @@ -0,0 +1,67 @@ +import { ButtonComponent } from '/components/button.js'; + +export const NavBar = () => { + return ( + + ); +}; diff --git a/src/components/button.tsx b/src/components/button.tsx new file mode 100644 index 0000000..8719b9b --- /dev/null +++ b/src/components/button.tsx @@ -0,0 +1,17 @@ +interface ButtonProps { + text?: string; + icon?: string; + callback?: Function; +} + +export const ButtonComponent = (props?: ButtonProps) => { + const btnProps = props ?? {}; + return ( +
+ +
+ ); +}; diff --git a/src/index.css b/src/index.css index ef58fd5..950eed4 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,7 @@ padding: 0; box-sizing: border-box; font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: 14; + font-size: 14px; } .navbar { @@ -121,7 +121,7 @@ justify-content: center; } -.bell { +.button { background-color: #f5f6fa; border: 1px solid #f5f6fa; border-radius: 3px; diff --git a/src/index.html b/src/index.html index 0e2dbc4..0bf612f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,158 +1,19 @@ - - - - + + + Server - - - - - - -
- -
- -
- - - - -
-
-
-
Апокалипсис -
-
- -
-
- -
-
- -
- - + + + + + + +
+ + diff --git a/src/jsx_core/jsx-runtime/jsx.d.ts b/src/jsx_core/jsx-runtime/jsx.d.ts index cc60307..5948248 100644 --- a/src/jsx_core/jsx-runtime/jsx.d.ts +++ b/src/jsx_core/jsx-runtime/jsx.d.ts @@ -4,6 +4,7 @@ export namespace JSXInternal { export interface IntrinsicAttributes { key?: any; } - + export type SVGAttributes = any; + export type HTMLAttributes = any; export type IntrinsicElements = any; } diff --git a/src/jsx_core/renderer.ts b/src/jsx_core/renderer.ts index 54b6cdc..7a29366 100644 --- a/src/jsx_core/renderer.ts +++ b/src/jsx_core/renderer.ts @@ -1,24 +1,39 @@ -import { JSXChildType, JSXNode } from "/jsx_core/jsx-runtime"; +import { JSXChildType, JSXNode } from '/jsx_core/jsx-runtime'; export function RenderJSX(root: Element, fragment: JSXChildType[]): void { root.childNodes.forEach((child) => { root.removeChild(child); }); fragment.forEach((child) => { + if (child === undefined) return; let newNode: Node; - if (typeof child == "string") { + if (typeof child == 'string') { newNode = document.createTextNode(child); } else { const newElement = document.createElement(child.type); + Object.entries(child.props).forEach((entry) => { - if (entry[0] != "children") - newElement.setAttribute(entry[0], entry[1].toString()); + const [attrName, attrValue] = entry; + switch (attrName) { + case 'children': + break; + case 'class': + if (Array.isArray(attrValue)) { + attrValue.forEach((cn) => { + if (typeof cn === 'string') newElement.classList.add(cn); + }); + } else { + newElement.setAttribute(attrName, attrValue.toString()); + } + default: + newElement.setAttribute(attrName, attrValue.toString()); + break; + } }); - console.log("child.children", child.children); + RenderJSX(newElement, child.children); newNode = newElement; } root.appendChild(newNode); - console.log(newNode); }); } diff --git a/src/screens/MainApp.tsx b/src/screens/MainApp.tsx new file mode 100644 index 0000000..628d88b --- /dev/null +++ b/src/screens/MainApp.tsx @@ -0,0 +1,46 @@ +import { NavBar } from '/chunks/navbar.js'; + +export const MainApp = () => { + return ( + <> +
{NavBar()}
+ +
+ + +
+
+
+
+ Апокалипсис +
+
+ +
+
+
+
+
+ + ); +}; diff --git a/src/tsconfig.json b/src/tsconfig.json index bd4a9d7..f8d536d 100644 --- a/src/tsconfig.json +++ b/src/tsconfig.json @@ -12,6 +12,6 @@ "strict": true, "jsx": "react-jsx", "jsxImportSource": "/jsx_core", - "paths": { "/jsx_core/*": ["./jsx_core/*"] } + "paths": { "/jsx_core/*": ["./jsx_core/*"], "/*": ["./*"] } } }