widgets/index.js

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

// 会话/账户
document.body.appendChild(createElement({
    style: {
        position: 'fixed',
        top: 0,
        right: 0,
    },
    children: [
        div.text('session')
    ]
}))

document.body.appendChild(div.fixed.t_2.r_2.bg_red_500.childs([
    div.text('session-x')
]))

// cursor-pointer overflow-clip hover:text-pink-500
document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.childs([
    h1.m_2rem.pt_2rem.text('Widgets!'),
    h1.m('2rem').p({ top: '2rem' }).text('Widgets!'),
    p.m('2rem').p({ top: '2rem' }).text('是什么, 为什么, 怎么做?'),
    ul.m('2rem').p({ top: '2rem' }).childs([
        li.text('也许你需要让事情变简单直观, 只使用纯粹的js代码, 整个项目只有js文件, 而不必在 js 和 html 和 css 文件之间跳来跳去'),
        li.text('汲取了 pug 和 winicss 的灵感, 以及 flutter 的嵌套布局方式, pug 减少 html 冗余, winicss 减少 css 冗余'),
        li.text('这个库的唯一作用就是给dom对象添加了额外的操作方法, 且每个方法的返回值都是dom自身, 从而实现对dom对象的链式操作')
    ]),

    new button({
        textContent: '模态窗口 dialog',
        onclick: event => {
            document.body.appendChild(Dialog({
                children: [
                    new span({ textContent: 'Hello world!' }),
                    new span({ textContent: 'Hello world!' }),
                ]
            }))
        }
    }),

    //span.css('bg-red').m('2rem').p({ top: '2rem' }).text('Hello world!'),
    new span({ textContent: 'Hello world!' }),

    // 三类参数
    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.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
})