foxpro 🐍
foxpro 🐍
Explore posts from servers
SSolidJS
Created by foxpro 🐍 on 12/17/2023 in #support
Polyfilling ecmascript features
Hey! Not experienced with polyfills, but now I'm trying to wrap my app into android webview and I want to support e.g. chrome 80+. And there are some things that not supported, Object.hasOwn What's the recommended way to add polyfills with default stack (Vite + solid.js)? I tried adding core-js with babel preset to solid otpions, but seems like Vite doesn't handle it right in dev-mode, as core-js is written with require.
1 replies
SSolidJS
Created by foxpro 🐍 on 10/4/2023 in #support
Updating rendered element in HMR?
I'm still working on stack routing and what I need is different transitions between different views. The problem is: if I use rendered element inside <For> loop:
<AdvancedRouterContext.Provider value={ctx}>
<For each={ctx.store.graph}>{item => item.element}</For>
</AdvancedRouterContext.Provider>
<AdvancedRouterContext.Provider value={ctx}>
<For each={ctx.store.graph}>{item => item.element}</For>
</AdvancedRouterContext.Provider>
It never updates element if HMR occurs. This is how I render components to elements:
async function onMatch(
def: Placeholder,
match: ReturnType<ReturnType<typeof useMatch>>,
prevMatch: typeof match
) {
// <...>
const els = children(() => (
<AdvancedRouterContext.Provider value={{ ...ctx, match }}>
<def.component />
</AdvancedRouterContext.Provider>
))
const promise = new Promise<HTMLElement>(res => {
createComputed(() => {
const el = els.toArray()[0]
if (el === undefined) return
res(el as HTMLElement)
})
})
const element = await promise
view = {
stackable: def.stackable,
next: null,
parent: store.top,
path: match.path,
element
}
batch(() => {
store.graph.push(view as View)
store.top = view
})
// <...>
}
async function onMatch(
def: Placeholder,
match: ReturnType<ReturnType<typeof useMatch>>,
prevMatch: typeof match
) {
// <...>
const els = children(() => (
<AdvancedRouterContext.Provider value={{ ...ctx, match }}>
<def.component />
</AdvancedRouterContext.Provider>
))
const promise = new Promise<HTMLElement>(res => {
createComputed(() => {
const el = els.toArray()[0]
if (el === undefined) return
res(el as HTMLElement)
})
})
const element = await promise
view = {
stackable: def.stackable,
next: null,
parent: store.top,
path: match.path,
element
}
batch(() => {
store.graph.push(view as View)
store.top = view
})
// <...>
}
Is it possible to handle HMR update and re-render elements? I kinda solved it by adding component inside view and rendering it in <For> and then catching via <Ref> and promise, but this solution adds complexity only for sake of HMR.
1 replies
SSolidJS
Created by foxpro 🐍 on 7/12/2023 in #support
`@solidjs/router` doesn't navigate in production mode
export function App() {
return (
<MetaProvider>
<Title>SferaDel</Title>
<I18n>
<div>App outline</div>
<SPARouter />
<Toaster />
</I18n>
</MetaProvider>
)
}
// spa_router.tsx:
import { LoginPage } from '~/views/login.tsx'
export const AppRoute = Object.freeze({
Index: '/',
Login: '/login',
})
export function SPARouter() {
return (
<Router>
<Routes>
<Route
path={AppRoute.Index}
component={() => {
return (
<div>
<Link href={AppRoute.Login}>login</Link>
</div>
)
}}
/>
<Route path={AppRoute.Login} component={LoginPage} />
<Route path="*" element="[SPA] Not found" />
</Routes>
</Router>
)
}
export function App() {
return (
<MetaProvider>
<Title>SferaDel</Title>
<I18n>
<div>App outline</div>
<SPARouter />
<Toaster />
</I18n>
</MetaProvider>
)
}
// spa_router.tsx:
import { LoginPage } from '~/views/login.tsx'
export const AppRoute = Object.freeze({
Index: '/',
Login: '/login',
})
export function SPARouter() {
return (
<Router>
<Routes>
<Route
path={AppRoute.Index}
component={() => {
return (
<div>
<Link href={AppRoute.Login}>login</Link>
</div>
)
}}
/>
<Route path={AppRoute.Login} component={LoginPage} />
<Route path="*" element="[SPA] Not found" />
</Routes>
</Router>
)
}
Entry html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<!--head-->
</head>
<body>
<!--body-->
<script type="module" src="../pages/index/app-loader.tsx"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<!--head-->
</head>
<body>
<!--body-->
<script type="module" src="../pages/index/app-loader.tsx"></script>
</body>
</html>
and app_loader:
import { render } from 'solid-js/web'
import { App } from '~/app.tsx'
document.body.innerHTML = ''
render(App, document.body)
import { render } from 'solid-js/web'
import { App } from '~/app.tsx'
document.body.innerHTML = ''
render(App, document.body)
Video with dev and prod modes:
14 replies
SSolidJS
Created by foxpro 🐍 on 3/14/2023 in #support
Transform property on all elements
I want to write my JSX with Linaria like this:
<div
class="w-full font-mono"
css="
color: red;
animation: 15s infinite forwards slide;
">
<div
class="w-full font-mono"
css="
color: red;
animation: 15s infinite forwards slide;
">
so it transforms to something like
createElement('div', { class: "w-full font-mono" + " " + _linariaGeneratedClass })
createElement('div', { class: "w-full font-mono" + " " + _linariaGeneratedClass })
How can I achieve that? Is it possible to extend solid babel plugin?
11 replies