forked from opentiny/tiny-vue
feat(solid): add solid file structure (#1140)
* feat(solid): add solid file structure * feat(solid): add solid file structure
This commit is contained in:
parent
c58b4a350d
commit
f74d5c30af
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Opentiny Solid 组件调试</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"name": "@opentiny/docs-solid",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"solid-js": "^1.7.8",
|
||||||
|
"@opentiny/solid": "workspace:~"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "^4.4.5",
|
||||||
|
"vite-plugin-solid": "^2.7.0",
|
||||||
|
"vite-plugin-svgr": "^3.2.0"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
After Width: | Height: | Size: 1.5 KiB |
|
@ -0,0 +1,12 @@
|
||||||
|
import { Button } from '@opentiny/solid'
|
||||||
|
|
||||||
|
// 在这里导入组件,进行 api 调试
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="app">
|
||||||
|
<Button>点击按钮</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
|
@ -0,0 +1,4 @@
|
||||||
|
.app {
|
||||||
|
margin: 10px;
|
||||||
|
width: 500px;
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { render } from 'solid-js/web'
|
||||||
|
import App from './App'
|
||||||
|
import './main.css'
|
||||||
|
|
||||||
|
const root = document.getElementById('root')
|
||||||
|
|
||||||
|
render(() => <App />, root)
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import solid from 'vite-plugin-solid'
|
||||||
|
import svgr from 'vite-plugin-svgr'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [solid(), svgr()]
|
||||||
|
})
|
|
@ -124,7 +124,9 @@
|
||||||
"build:react-site": "pnpm --filter @opentiny/react-site build",
|
"build:react-site": "pnpm --filter @opentiny/react-site build",
|
||||||
"prettier": "prettier --config .prettierrc --write .",
|
"prettier": "prettier --config .prettierrc --write .",
|
||||||
"// ---------- openinula 相关脚本命令 ----------": "",
|
"// ---------- openinula 相关脚本命令 ----------": "",
|
||||||
"dev:openinula": "pnpm -C examples/openinula-docs run dev"
|
"dev:openinula": "pnpm -C examples/openinula-docs run dev",
|
||||||
|
"// ---------- solid 相关脚本命令 ----------": "",
|
||||||
|
"dev:solid": "pnpm -C examples/solid-docs run dev"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/composition-api": "1.2.2",
|
"@vue/composition-api": "1.2.2",
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
ignores:
|
||||||
|
- '@opentiny/solid*'
|
|
@ -0,0 +1,9 @@
|
||||||
|
import Button from '@opentiny/solid-button'
|
||||||
|
|
||||||
|
export const version = '1.0.0'
|
||||||
|
|
||||||
|
export { Button }
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Button
|
||||||
|
} as any
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name": "@opentiny/solid",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@opentiny/solid-common": "workspace:~",
|
||||||
|
"@opentiny/solid-button": "workspace:~"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Alert from './src'
|
||||||
|
|
||||||
|
export default Alert
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "@opentiny/solid-button",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@opentiny/vue-renderless": "workspace:~",
|
||||||
|
"@opentiny/solid-common": "workspace:~",
|
||||||
|
"@opentiny/vue-theme": "workspace:~",
|
||||||
|
"@opentiny/vue-theme-mobile": "workspace:~"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
import pc from './pc'
|
||||||
|
|
||||||
|
export default function (props) {
|
||||||
|
const { tiny_mode = 'pc' } = props
|
||||||
|
|
||||||
|
const S = {
|
||||||
|
pc
|
||||||
|
}[tiny_mode]
|
||||||
|
|
||||||
|
return S(props)
|
||||||
|
}
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { renderless } from '@opentiny/vue-renderless/button/vue'
|
||||||
|
import { useSetup } from '@opentiny/solid-common'
|
||||||
|
import '@opentiny/vue-theme/button/index.less'
|
||||||
|
|
||||||
|
export default function Button(props) {
|
||||||
|
const { children, text, autofocus, round, circle, icon: Icon, size, nativeType = 'button' } = props
|
||||||
|
const { handleClick, state, tabindex, type, $attrs } = useSetup({
|
||||||
|
props: { nativeType: 'button', resetTime: 1000, ...props },
|
||||||
|
renderless
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={[
|
||||||
|
'tiny-button',
|
||||||
|
type ? 'tiny-button--' + type : '',
|
||||||
|
size ? 'tiny-button--' + size : '',
|
||||||
|
state().disabled ? 'is-disabled' : '',
|
||||||
|
state().plain ? 'is-plain' : '',
|
||||||
|
round ? 'is-round' : '',
|
||||||
|
circle ? 'is-circle' : ''
|
||||||
|
]
|
||||||
|
.join(' ')
|
||||||
|
.trim()}
|
||||||
|
onClick={handleClick}
|
||||||
|
disabled={state().disabled}
|
||||||
|
autoFocus={autofocus}
|
||||||
|
type={nativeType}
|
||||||
|
tabIndex={tabindex}
|
||||||
|
{...$attrs}>
|
||||||
|
{Icon ? <Icon className={text || children ? 'is-text' : ''} /> : ''}
|
||||||
|
<span>{children || text}</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "@opentiny/solid-common",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@opentiny/vue-renderless": "workspace:~",
|
||||||
|
"@opentiny/vue-theme": "workspace:~",
|
||||||
|
"classnames": "^2.3.2",
|
||||||
|
"solid-js": "^1.7.8"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,91 @@
|
||||||
|
import * as hooks from 'solid-js'
|
||||||
|
import { createSignal, onCleanup, createMemo } from 'solid-js'
|
||||||
|
import '@opentiny/vue-theme/base/index.less'
|
||||||
|
|
||||||
|
const EVENTS_PREFIX = 'on'
|
||||||
|
|
||||||
|
// 处理solid事件触发机制
|
||||||
|
export const emit =
|
||||||
|
(props) =>
|
||||||
|
(evName, ...args) => {
|
||||||
|
const eventsName = `${EVENTS_PREFIX}${evName[0].toLocaleUpperCase()}${evName.slice(1)}`
|
||||||
|
if (props[eventsName] && typeof props[eventsName] === 'function') {
|
||||||
|
props[eventsName](...args)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useSetState = (initialState) => {
|
||||||
|
const [state, setState] = createSignal(initialState, { equals: false })
|
||||||
|
|
||||||
|
return [state, setState]
|
||||||
|
}
|
||||||
|
|
||||||
|
// props 应该不用做处理, props 都是 . 访问。
|
||||||
|
export const reactive = (staticObject) => {
|
||||||
|
const [state, setState] = useSetState(staticObject)
|
||||||
|
|
||||||
|
return new Proxy(state(), {
|
||||||
|
get(target, property) {
|
||||||
|
if (property === 'solidState') {
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
if (typeof target[property] === 'function') {
|
||||||
|
return target[property](target)
|
||||||
|
} else {
|
||||||
|
return target[property]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
set(target, property, value) {
|
||||||
|
Reflect.set(target, property, value)
|
||||||
|
setState((val) => val)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// nextTick, 等待 dom 更新后触发回调
|
||||||
|
export const useNextTick = (callback) => {
|
||||||
|
queueMicrotask(callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
// emitEvent, dispath, broadcast
|
||||||
|
export const emitEvent = () => {
|
||||||
|
const broadcast = () => {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
dispatch: () => {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
broadcast
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const computed = (callback) => {
|
||||||
|
try {
|
||||||
|
return createMemo(callback)
|
||||||
|
} catch (error) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useSetup = ({ props, renderless, extendOptions = { framework: 'Solid' } }) => {
|
||||||
|
const render = typeof props.tiny_renderless === 'function' ? props.tiny_renderless : renderless
|
||||||
|
const utils = {
|
||||||
|
parent: {},
|
||||||
|
emit: emit(props)
|
||||||
|
}
|
||||||
|
const sdk = render(
|
||||||
|
props,
|
||||||
|
{ ...hooks, reactive, computed, useNextTick, inject: () => {}, watch: () => {}, onBeforeUnmount: onCleanup },
|
||||||
|
utils,
|
||||||
|
extendOptions
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
...sdk,
|
||||||
|
state: sdk.state.solidState,
|
||||||
|
type: props.type ?? 'default'
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue