widgets/index.js

import { div, span, pre, h1, h2, p, ul, li, button, createElement } from './main.js'
import { Dialog } from './widgets/dialog.js'

document.body.style.fontFamily = 'Arial, sans-serif'
document.body.style.fontSize = '14px'

document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
    div.text('会话/账户')
]))

document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.childs([
    h1.m_2rem.pt_2rem.text('Widgets!'),
    p.m('1rem').p({ top: '1rem' }).text('是什么, 为什么, 怎么做?'),
    ul.m('1rem').p({ top: '1rem' }).childs([
        li.text('让事情变简单直观, 仅使用js代码, 而不必在 js/html/css 文件之间来回翻找'),
        li.text('大幅提高代码信息密度, 灵感来自 pug/winicss/flutter, 减少布局与样式冗余'),
        li.text('为dom对象添加链式操作方法, 使其返回值都是dom自身')
    ]),
    new button({
        textContent: '模态窗口 dialog',
        onclick: event => {
            document.body.appendChild(Dialog({
                style: { width: '32rem', padding: '24px' },
                children: [
                    div.childs([
                        h2.m_0.font_semibold.text('Are you absolutely sure?'),
                        p.mt_8.color('#71717a').text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.')
                    ]),
                    div.flex.justify_end.gap_8.childs([
                        button.text('Cancel'),
                        button.text('Delete'),
                    ]),
                ]
            }))
        }
    }),

    // 三类参数
    p.text(`
        span 是一个类(class), 直接实例化 (new span()) 将创建一个 span 元素(DOM对象). 实例化时可以传递参数, 它对应DOM对象的属性.
        span.m('2rem').p({ top: '2rem' }).text('Hello world!') 是一个链式操作, 每个链式操作都是DOM对象的方法缩写. 不同的是它返回的是DOM对象自身.
        span.cursor_pointer.color_ppp.w(128).h(64).childs([span.text('Hello world!')]) 是预定义的链式操作, 在执行函数方法前的静态属性调用并没有实例化对象, 只是缓存了属性值. 当对象被实例化时, 静态属性会被应用到实例对象上. 而静态属性的语法对应 tailwindcss 的类名.
    `)
]))

// 使用 js 文件作为组件管理代码
document.body.appendChild(div.cursor_pointer.color_ppp.w(128).h(64).childs([
    span.m('2rem').p({ top: '2rem' }).text('Hello world!'),
    new span({ textContent: 'Hello world!' }),
]))

fetch('/index.js').then(res => res.text()).then(text => {
    text = text.replace(/from "\/main.js"/g, "from '@laniakeasupercluster/widgets'")
    document.body.appendChild(pre.overflow_auto.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
})