jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 04:12:14 +02:00
Code Packages Releases Activity

docs + ssr fixes

Browse Source
This commit is contained in:
Jan Andrle
2023-11-07 15:10:55 +01:00
parent 7d21b7799f
commit 2c844a0ca9
16 changed files with 708 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs_src/components/example.html.js
View File

@ -1,8 +1,8 @@
let is_registered= false;
let is_registered= {};
import { styles } from "../index.css.js";
export const css= styles().scope(example).css`
:host{
grid-column: 1/4;
grid-column: 1/-1;
width: 100%;
max-width: calc(9/5 * var(--body-max-width));
height: calc(3/5 * var(--body-max-width));
@ -10,12 +10,17 @@ export const css= styles().scope(example).css`
}
`
import { el } from "deka-dom-el";
export function example({ src, language= "javascript" }){
register();
const cwd= "components";
src= "."+src.slice(src.indexOf(cwd)+cwd.length);
const code= s.cat(new URL(src, import.meta.url))
.toString()
/**
* Prints code to the page and registers flems to make it interactive.
* @param {object} attrs
* @param {URL} attrs.src Example code file path
* @param {string} [attrs.language="javascript"] Language of the code
* @param {string} attrs.page_id ID of the page
* @param {import("../types.d.ts").registerClientFile} attrs.registerClientFile
* */
export function example({ src, language= "javascript", page_id, registerClientFile }){
registerClientPart(page_id, registerClientFile);
const code= s.cat(src).toString()
.replaceAll(' from "../../../index-with-signals.js";', ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
const id= "code-"+Math.random().toString(36).slice(2, 7);
return el().append(
@ -34,10 +39,17 @@ function elCode({ id, content }){
});
return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);
}
function register(){
if(is_registered) return;
function registerClientPart(page_id, registerClientFile){
if(is_registered[page_id]) return;
//★ Highlite code when no flems?
document.head.append(
el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
//★ el("script", { src: "https://cdn.jsdelivr.net/npm/shiki", defer: true }),
);
is_registered= true;
//★ egisterClientFile(
//★ new URL("./example.js.js", import.meta.url),
//★ el("script", { type: "module" })
//★ ;
is_registered[page_id]= true;
}

19
docs_src/components/example.js.js Normal file
View File

@ -0,0 +1,19 @@
const langs= {
javascript: 'js',
js: 'js',
html: 'html',
};
const highlighter= await shiki.getHighlighter({
theme: 'css-variables',
langs: ['js', 'html', 'shell'],
});
const codeBlocks= document.querySelectorAll('pre code[class*="language-"]');
codeBlocks.forEach((block)=> {
const lang= block.className.replace('language-', '');
const html= highlighter.codeToHtml(block.textContent, {
lang: langs[lang] || lang,
});
block.innerHTML= html;
});