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:
ajaxzheng
GitHub
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",
|
||||
"prettier": "prettier --config .prettierrc --write .",
|
||||
"// ---------- 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": {
|
||||
"@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