Skip to content

Commit

Permalink
feat: update deps
Browse files Browse the repository at this point in the history
FliPPeDround committed Jul 30, 2024
1 parent 3a8e82b commit cec2574
Showing 14 changed files with 1,111 additions and 239 deletions.
16 changes: 0 additions & 16 deletions docs/.gitignore

This file was deleted.

61 changes: 22 additions & 39 deletions docs/.vitepress/components/repl/index.vue
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
<script setup lang="ts">
import '@vue/repl/style.css'
import { useDark } from '@vueuse/core'
import { Repl, ReplStore } from '@vue/repl'
import Editor from '@vue/repl/codemirror-editor'
import { Repl, useStore } from '@vue/repl'
import CodeMirror from '@vue/repl/codemirror-editor'
import { ref } from 'vue'
const { code } = defineProps<{ code: string }>()
const isDark = useDark()
const store = new ReplStore()
store.setFiles({
'App.vue': code,
'import-map.json': `{
"imports": {
"leafer-ui": "https://cdn.jsdelivr.net/npm/leafer-ui/dist/index.js",
"leafer-vue": "${location.origin}/leafer-vue.proxy.js"
}
}`,
const store = useStore({
template: ref({
welcomeSFC: code,
}),
builtinImportMap: ref({
imports: {
'vue': 'https://unpkg.com/vue/dist/vue.esm-browser.prod.js',
'leafer-ui': 'https://cdn.jsdelivr.net/npm/leafer-ui/dist/index.js',
'leafer-vue': `${location.origin}/leafer-vue.proxy.js`,
},
}),
})
function handleKeydown(evt: KeyboardEvent) {
@@ -29,44 +31,25 @@ function handleKeydown(evt: KeyboardEvent) {
<Repl
:theme="isDark ? 'dark' : 'light'"
:store="store"
:editor="Editor"
:editor="CodeMirror"
:auto-resize="false"
:show-compile-output="false"
:show-import-map="true"
:show-ts-config="false"
:clear-console="false"
layout="vertical"
layout-reverse
@keydown="handleKeydown"
/>
</template>

<style>
.vue-repl {
height: 600px !important;
height: 720px !important;
}
.left {
border: none !important;
}
.split-pane:not(.show-output) .left {
width: 100% !important;
}
.split-pane.show-output .left {
display: none !important;
}
.split-pane:not(.show-output) .right {
display: none !important;
}
.split-pane.show-output .right {
width: 100% !important;
.tab-buttons {
display: none;
}
.dragger {
display: none !important;
}
.toggler {
display: block !important;
.output-container {
height: 100% !important;
}
</style>
6 changes: 3 additions & 3 deletions docs/guide/start/index.vue
Original file line number Diff line number Diff line change
@@ -16,14 +16,14 @@ function changeColor() {
</script>

<template>
<LeaferApp :width="650" :height="600">
<LeaferApp :width="650" :height="340">
<Leafer @tap="changeColor">
<template
v-for="row in 100"
v-for="row in 33"
:key="row"
>
<Rect
v-for="col in 25"
v-for="col in 17"
:key="col"
:rotation="rotation"
:x="(row - 1) * 20" :y="(col - 1) * 20"
18 changes: 6 additions & 12 deletions docs/package.json
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
"name": "docs",
"type": "module",
"version": "0.0.3",
"private": true,
"description": "",
"author": "FliPPeDround <FliPPeDround@qq.com>",
"license": "MIT",
@@ -11,19 +12,12 @@
"docs:preview": "vitepress preview"
},
"dependencies": {
"@vue/repl": "^2.5.8",
"@vueuse/core": "^10.3.0",
"vue": "^3.3.4"
"@vue/repl": "^4.3.1",
"@vueuse/core": "^10.11.0",
"leafer-vue": "workspace:^3.0.0",
"vue": "^3.4.34"
},
"devDependencies": {
"@tsconfig/node18": "^2.0.1",
"@types/node": "^18.16.17",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/tsconfig": "^0.4.0",
"leafer-vue": "workspace:^3.0.0",
"typescript": "~5.0.4",
"vite": "^4.3.9",
"vitepress": "1.0.0-rc.4",
"vue-tsc": "^1.6.5"
"vitepress": "^1.3.1"
}
}
170 changes: 164 additions & 6 deletions docs/public/leafer-vue.proxy.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,165 @@
import { ref as $, watch as A, onUnmounted as E, createRenderer as I, onMounted as U, defineComponent as v, renderSlot as w, h as y } from 'vue'; import { App as C, UI as d, UI as x } from 'leafer-ui'
// components/application/index.ts
import { defineComponent, h, onMounted, onUnmounted, ref, renderSlot } from "vue";
import { App } from "leafer-ui";

const c = class extends d {constructor() { super(...arguments); this.visible = !1 }}; function p() { function r(t) { const n = { content: '', css: [] }; t.unshift({ content: '\u2618\uFE0FLeafer-vue warn:' }), t.forEach((o, e) => { n.content += `%c${(o == null ? void 0 : o.content) ?? ' '}`, n.css.push(`${o != null && o.color ? `color:${o.color}` : ''}${o != null && o.backgroundColor ? `;background:${o.backgroundColor}` : ''};padding: 0px${e === 0 ? ';border-top-left-radius: 25px; border-bottom-left-radius: 8px' : ''}${e === t.length - 1 ? ';border-top-right-radius: 8px; border-bottom-right-radius: 8px' : ''}`) }), console.warn(`${n.content}`, ...n.css) } return { log: r } } function h(r) { return r.slice(2).replace(/([A-Z])/g, (t, n, o) => o === 0 ? n.toLowerCase() : `.${n.toLowerCase()}`) } const { log: b } = p(); const f = I({ createElement(r, t, n, o) { return x.one({ tag: r, ...o }) }, patchProp(r, t, n, o) { t.startsWith('on') && r.on(h(t), o), r[t] = o }, insert(r, t) { r && t && t.add(r) }, remove(r) { r == null || r.destroy() }, createText(r) { return r.trim() && b([{ content: ' \u4E0D\u652F\u6301\u76F4\u63A5\u5199\u5165\u6587\u672C\uFF0C\u8BF7\u4F7F\u7528 ' }, { color: '#6eacf8', backgroundColor: '#222222', content: `<Text text="${r.trim()}" />` }, { content: ' \u4EE3\u66FF' }]), null }, createComment() { return new c() }, setText() {}, setElementText() {}, parentNode(r) { return r == null ? void 0 : r.parent }, nextSibling(r) {
let o; if (!r)
return null; const t = ((o = r == null ? void 0 : r.parent) == null ? void 0 : o.children) || [r]; if ((t == null ? void 0 : t.length) === 1)
return null; const n = t.findIndex(e => e.innerId === r.innerId); return t.length <= n + 1 ? null : t[n + 1] ?? null
} }); const i = f.createApp; function a(r) { const t = {}; return Object.keys(r).forEach((n) => { n.startsWith('on') || (t[n] = r[n]) }), t } function u(r, t) { A(() => a(r), (n) => { t.set(n) }) } const F = v({ inheritAttrs: !1, setup(r, { slots: t, expose: n, attrs: o }) { const e = $(); const g = a(o); let s; function l() { s = new C({ ...g, view: e.value, start: !1 }), i({ render: () => w(t, 'default') }).mount(s), s.start() } function m() { s.destroy() } return U(() => { l(), u(o, s), n({ container: s }) }), E(m), () => y('canvas', { ref: e }) } }); export { F as LeaferApp }
// renderer/renderer.ts
import { UI as UI2 } from "leafer-ui";
import { createRenderer } from "vue";

// renderer/commentTag.ts
import { UI } from "leafer-ui";
var Comment = class extends UI {
constructor() {
super(...arguments);
this.visible = false;
}
};

// composables/useLogger.ts
function useLogger() {
function log2(colorInfo) {
const logData = {
content: "",
css: []
};
colorInfo.unshift({
content: "\u2618\uFE0FLeafer-vue warn:"
});
colorInfo.forEach((item, index) => {
logData.content += `%c${(item == null ? void 0 : item.content) ?? " "}`;
logData.css.push(
`${(item == null ? void 0 : item.color) ? `color:${item.color}` : ""}${(item == null ? void 0 : item.backgroundColor) ? `;background:${item.backgroundColor}` : ""};padding: 0px${index === 0 ? ";border-top-left-radius: 25px; border-bottom-left-radius: 8px" : ""}${index === colorInfo.length - 1 ? ";border-top-right-radius: 8px; border-bottom-right-radius: 8px" : ""}`
);
});
console.warn(
`${logData.content}`,
...logData.css
);
}
return {
log: log2
};
}

// renderer/renderer.ts
function getEventNameByAttrName(attrName) {
return attrName.slice(2).replace(/([A-Z])/g, (_, letter, index) => index === 0 ? letter.toLowerCase() : `.${letter.toLowerCase()}`);
}
var { log } = useLogger();
var renderer = createRenderer({
createElement(type, _, _1, props) {
return UI2.one({ tag: type, ...props });
},
patchProp(el, key, _prevValue, nextValue) {
if (key.startsWith("on"))
el.on(getEventNameByAttrName(key), nextValue);
el[key] = nextValue;
},
insert(el, parent) {
if (el && parent)
parent.add(el);
},
remove(el) {
el == null ? void 0 : el.destroy();
},
createText(text) {
if (text.trim()) {
log([
{
content: " \u4E0D\u652F\u6301\u76F4\u63A5\u5199\u5165\u6587\u672C\uFF0C\u8BF7\u4F7F\u7528 "
},
{
color: "#6eacf8",
backgroundColor: "#222222",
content: `<Text text="${text.trim()}" />`
},
{
content: " \u4EE3\u66FF"
}
]);
}
return null;
},
// @ts-expect-error 类型不太重要
createComment() {
return new Comment();
},
setText() {
},
setElementText() {
},
parentNode(node) {
return node == null ? void 0 : node.parent;
},
nextSibling(node) {
var _a;
if (!node)
return null;
const children = ((_a = node == null ? void 0 : node.parent) == null ? void 0 : _a.children) || [node];
if ((children == null ? void 0 : children.length) === 1)
return null;
const index = children.findIndex((_node) => _node.innerId === node.innerId);
if (children.length <= index + 1)
return null;
return children[index + 1] ?? null;
}
});

// renderer/index.ts
var createApp = renderer.createApp;

// composables/useGetPropsAndEventByAttrs/index.ts
function useGetPropsByAttrs(attrs) {
const config = {};
Object.keys(attrs).forEach((key) => {
if (!key.startsWith("on"))
config[key] = attrs[key];
});
return config;
}

// composables/useEffectUpdate.ts
import { watch } from "vue";
function useEffectUpdate(attrs, instance) {
watch(
() => useGetPropsByAttrs(attrs),
(newConfig) => {
instance.set(newConfig);
}
);
}

// components/application/index.ts
var LeaferApp = defineComponent({
inheritAttrs: false,
setup(_props, { slots, expose, attrs }) {
const canvas = ref();
const config = useGetPropsByAttrs(attrs);
let container;
function mount() {
container = new App({
...config,
view: canvas.value,
start: false
});
const app = createApp({
render: () => renderSlot(slots, "default")
});
app.mount(container);
container.start();
}
function unMount() {
container.destroy();
}
onMounted(() => {
mount();
useEffectUpdate(attrs, container);
expose({ container });
});
onUnmounted(unMount);
return () => h("canvas", { ref: canvas });
}
});
export {
LeaferApp
};
13 changes: 13 additions & 0 deletions docs/shims.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
declare module '*.vue' {
import type { ComponentOptions } from 'vue'

const Component: ComponentOptions
export default Component
}

declare module '*.md' {
import type { ComponentOptions } from 'vue'

const Component: ComponentOptions
export default Component
}
8 changes: 0 additions & 8 deletions docs/tsconfig.app.json

This file was deleted.

11 changes: 0 additions & 11 deletions docs/tsconfig.json

This file was deleted.

15 changes: 0 additions & 15 deletions docs/tsconfig.node.json

This file was deleted.

3 changes: 3 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -9,4 +9,7 @@ export default await antfu({
'docs/.vitepress/cache/deps/*.*',
'**/public/*.js',
],
// rules: {
// "@typescript-eslint/ban-ts-comment": "error"
// }
})
5 changes: 4 additions & 1 deletion examples/vue3/tsconfig.app.json
Original file line number Diff line number Diff line change
@@ -5,7 +5,10 @@
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"types": [
"leafer-vue"
]
},
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"]
6 changes: 4 additions & 2 deletions packages/vue3/components/application/index.ts
Original file line number Diff line number Diff line change
@@ -20,7 +20,8 @@ export const LeaferApp = defineComponent({
const app = createApp({
render: () => renderSlot(slots, 'default'),
})
// @ts-expect-error leafer APP是一个dom节点
// eslint-disable-next-line ts/ban-ts-comment
// @ts-nocheck
app.mount(container)
container.start()
}
@@ -31,7 +32,8 @@ export const LeaferApp = defineComponent({

onMounted(() => {
mount()
// @ts-expect-error leafer APP是一个dom节点
// eslint-disable-next-line ts/ban-ts-comment
// @ts-nocheck
useEffectUpdate(attrs, container)
expose({ container })
})
998 changes: 878 additions & 120 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

20 changes: 14 additions & 6 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
{
"compilerOptions": {
"target": "esnext",
"lib": ["esnext", "DOM"],
"module": "esnext",
"target": "ES2020",
"jsx": "preserve",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"useDefineForClassFields": true,
"module": "ESNext",

/* Bundler mode */
"moduleResolution": "node",
"resolveJsonModule": true,

/* Linting */
"strict": true,
"strictNullChecks": true,
"esModuleInterop": true,
"skipDefaultLibCheck": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noEmit": true,
"isolatedModules": true,
"skipLibCheck": true
}
}

0 comments on commit cec2574

Please sign in to comment.