foxpro 🐍 Posts - Answer Overflow

foxpro 🐍

Explore posts from servers

•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

Gaming

Programming