FjordWarden
FjordWarden
Explore posts from servers
DDenoSSolidJS
PostsComments
DDeno
Created by FjordWarden on 10/9/2024 in #help
Run npm publish
How can I run npm publish with Deno2?
2 replies
DDeno
Created by FjordWarden on 9/21/2024 in #help
Import PyTorchJS
I wanted to try pytorch with js but I am running into some problems importing the NPM package. Maybe someone here know more. 
> import * as pytorch from 'npm:pytorchjs'
Initialize ⣯ [00:02]


Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Initialize ⣟ [00:02] 216/220cated: This package is no longer supported.
 - [email protected]: Glob versions prior to v9 are no longer supported
 - [email protected] is deprecated:
Uncaught Error: Could not locate the bindings file. Tried:
 → /Users/me/Code/node_modules/.deno/@[email protected]/node_modules/@arition/torch-js/build/torch-js.node
> import * as pytorch from 'npm:pytorchjs'
Initialize ⣯ [00:02]


Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Warning [email protected] is deprecated: This package is no longer supported.
Initialize ⣟ [00:02] 216/220cated: This package is no longer supported.
 - [email protected]: Glob versions prior to v9 are no longer supported
 - [email protected] is deprecated:
Uncaught Error: Could not locate the bindings file. Tried:
 → /Users/me/Code/node_modules/.deno/@[email protected]/node_modules/@arition/torch-js/build/torch-js.node
1 replies
SSolidJS
Created by FjordWarden on 5/14/2024 in #support
Custom renderer with hyper dom expressions
I've been trying to write my own custom renderer with the solid-js/universal module, but I am failing to understand how I should integrate the renderer into for example a Canvas component. I've studied the solid-three example and solid-universal-renderer-template examples and they seem to use directive in vite.config.js to tell the transpiler somehow to use the other renderer. I'm just using vanilla js so maybe I need to path solid/h in some way to get this to work. At any rate I'd appreciate if someone could tell me this is the right direction to take.
2 replies
SSolidJS
Created by FjordWarden on 5/7/2024 in #support
Return non DOM element as component with hyper dom expressions
I'd like to create a declarative api that uses components that are not part of the DOM tree. Sort of like this Canvas API: 
function Example(props) {
  return h(Canvas,
    h(Bezier,{points:[]}
  )
}
function Example(props) {
  return h(Canvas,
    h(Bezier,{points:[]}
  )
}
I'm just not sure how to implement to Bezier so it can also receive events.
5 replies
SSolidJS
Created by FjordWarden on 4/13/2024 in #support
No Context when using hyper dom expressions
I've this strange behaviour that useCounter(CounterContext) returns undefined when porting the context example to use hyper dom expressions. Check codepen here: https://codepen.io/wrnrlr/pen/eYojdqV?editors=1011 Any ideas what I am doing wrong?
4 replies
SSolidJS
Created by FjordWarden on 12/23/2023 in #support
Move table columns around with drag & drop
I've created a data table component where you can move around the order of the columns using the drag and drop api. Specifically, I am using e.dataTransfer.setData to set the index on an ondragstart and read it during the ondrop event. It works as expected, at least on the first try, after that the behaviour becomes weird because it will always use the old index and not the new ordering. I've tried using a Index instead of a For, this solves the index issue but then the data will be matched with the wrong column. One way to work around this is to just pass the index in manually like this: {each:()=>props.headers().map((h,i)=>[h,i])}. Might there be a better option?
1 replies
SSolidJS
Created by FjordWarden on 10/26/2023 in #support
Use non breaking space with hyper dom expressions
How can I use the good old   inside a div a bit like this: h('div', [h(...),'  and  ',h(...)])
3 replies
DDeno
Created by FjordWarden on 10/26/2023 in #help
Multiple subdomains
How can I listen for incoming http request on multiple subdomains?
3 replies
DDeno
Created by FjordWarden on 10/25/2023 in #help
Can't upgrade request to websocket
I want to use a websocket in one of my middlewares. But I keep getting an error saying I can't upgrade my connection: 
[uncaught application error]: TypeError - Invalid Header: 'upgrade' header must contain 'websocket'
[uncaught application error]: TypeError - Invalid Header: 'upgrade' header must contain 'websocket'
I've googled this error but only find old results relating this error to the version of deno or oak lib where I run the latest deno (1.37.2) and oak (12.6.1). 
import {Application,Router} from 'https://deno.land/x/[email protected]/mod.ts'

function RefreshMiddleware() {
  return async (ctx,next) => {
    console.log('url',ctx.request.url.href)
    if (ctx.request.url.href.endsWith("/refresh")) {
      console.log(ctx.isUpgradable);
      console.log(ctx.request.headers.get("connection"));
      const socket = ctx.upgrade()
    } else next()
  }
}

const app = new Application()
app.addEventListener("error", e => console.error(e.error))

// Logger
app.use(async (ctx, next) => {
  const start = Date.now()
  await next()
  console.log(`${ctx.request.method} ${ctx.request.url} - ${Date.now() - start}ms`)
})
app.use(RefreshMiddleware())
app.use((ctx) => {ctx.response.body = "Hello World!"})

await app.listen({port: 8000})
import {Application,Router} from 'https://deno.land/x/[email protected]/mod.ts'

function RefreshMiddleware() {
  return async (ctx,next) => {
    console.log('url',ctx.request.url.href)
    if (ctx.request.url.href.endsWith("/refresh")) {
      console.log(ctx.isUpgradable);
      console.log(ctx.request.headers.get("connection"));
      const socket = ctx.upgrade()
    } else next()
  }
}

const app = new Application()
app.addEventListener("error", e => console.error(e.error))

// Logger
app.use(async (ctx, next) => {
  const start = Date.now()
  await next()
  console.log(`${ctx.request.method} ${ctx.request.url} - ${Date.now() - start}ms`)
})
app.use(RefreshMiddleware())
app.use((ctx) => {ctx.response.body = "Hello World!"})

await app.listen({port: 8000})
11 replies
DDeno
Created by FjordWarden on 9/29/2023 in #help
BDD with async tests
I'd like to run some tests that all call the same helper function that wraps the bdd it function. Something like this: 
describe('why u no work?', async ()=>{
  const test = async (s) => {let r = await Promise.resolve(0); it(s, ()=>assertEquals(0,r))}
  await test('a')
  await test('b')
  await test('c')
})
describe('why u no work?', async ()=>{
  const test = async (s) => {let r = await Promise.resolve(0); it(s, ()=>assertEquals(0,r))}
  await test('a')
  await test('b')
  await test('c')
})
It works with a non-async version but I'd like to know how to do this in a async way.
3 replies
DDeno
Created by FjordWarden on 9/17/2023 in #help
Can't import typescript module
Why can I only import the js file and not the ts file? 
import * as zip from "https://deno.land/x/[email protected]/index.js"
import * as zipjs from "https://deno.land/x/[email protected]/index.d.ts";

zipjs.Writer //undefined
zip.ZipWriter //[class ZipWriter]
import * as zip from "https://deno.land/x/[email protected]/index.js"
import * as zipjs from "https://deno.land/x/[email protected]/index.d.ts";

zipjs.Writer //undefined
zip.ZipWriter //[class ZipWriter]
3 replies
DDeno
Created by FjordWarden on 9/6/2023 in #help
Read CSV files inside zip file using the web streams API
I need to read a number of csv files inside a zip file. The basic example I've got working so far is the following: 
import {BlobReader,ZipReader,ZipWriter} from 'https://deno.land/x/zipjs/index.js'
import {readCSV} from 'https://deno.land/x/csv/mod.ts'
import {CsvParseStream} from 'https://deno.land/[email protected]/csv/mod.ts'

const srcFile = await Deno.open('/data.zip')
const zipReader = new ZipReader(srcFile)
for (let entry of (await zipReader.getEntries())) {
  console.log('filename ', entry.filename)
  let csvStream = new CsvParseStream({skipFirstRow:false,columns:undefined})
  if (entry.filename.startsWith('code')) {
    await entry.getData(csvStream.writable)
    for await (const chunk of csvStream.readable) {
      console.log(chunk)
    }
  }
}
import {BlobReader,ZipReader,ZipWriter} from 'https://deno.land/x/zipjs/index.js'
import {readCSV} from 'https://deno.land/x/csv/mod.ts'
import {CsvParseStream} from 'https://deno.land/[email protected]/csv/mod.ts'

const srcFile = await Deno.open('/data.zip')
const zipReader = new ZipReader(srcFile)
for (let entry of (await zipReader.getEntries())) {
  console.log('filename ', entry.filename)
  let csvStream = new CsvParseStream({skipFirstRow:false,columns:undefined})
  if (entry.filename.startsWith('code')) {
    await entry.getData(csvStream.writable)
    for await (const chunk of csvStream.readable) {
      console.log(chunk)
    }
  }
}
The problem is that the chunk is some weird array of strings of numbers and not the row I would expect. 
[ "34",  "67", "97", ...1356838 more items
[ "34",  "67", "97", ...1356838 more items
Any help would be welcome.
2 replies
SSolidJS
Created by FjordWarden on 8/23/2023 in #support
Remove element from store not working
I'm trying to remove an element from a reactive store based on the index. I've tried versions of this but I keep getting an error telling me "Cannot mutate a Store directly": 
props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1)))
props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))
I've tried both <For> and <Index> I've also tried something like props.setMyFilter(i(),undefined) but this does not result in any change in the DOM, but it does log an error because it is trying to render a element from the store that is no longer there. 
Uncaught TypeError: Cannot read properties of undefined (reading 'description')
Uncaught TypeError: Cannot read properties of undefined (reading 'description')
4 replies
SSolidJS
Created by FjordWarden on 8/10/2023 in #support
Render a component referenced by a object
How van I render a component that is referenced by an object instead of just writing the tag directly? For example I'd have a store where I want to programmatically change what ckind of editor is supported: 
function View() {
  const [store,setStore] = createStore([{label:'text',form:TextForm}])
  return <For each={f=> ??? }</For>
}
function View() {
  const [store,setStore] = createStore([{label:'text',form:TextForm}])
  return <For each={f=> ??? }</For>
}
Something like f.form does not work here. Maybe this is not a good idea and I should just use a type attribute in the object and check with an if when rendering, but I was wondering more if this is an option at all.
1 replies
DDeno
Created by FjordWarden on 7/9/2023 in #help
Sanitize multiple test steps
Is it possible to sanitize multiple steps inside of one test. I want to test my DB with somthing like this: 
test('db', {permissions:{net:true,env:true},sanitizeOps:false,sanitizeResources:false}, async t=>{
    await testDB(async sql => {
      assertOk(await ddl(sql))
      await sql`insert into task values ${sql(task)}`
      t.step('popTask', async ()=>assertEquals((await popTask(sql)).ok[0], task))
      t.step('upsertFiling', async ()=>assertOk(async()=>await upsertFiling(sql, {id:1})))
    })
  })
test('db', {permissions:{net:true,env:true},sanitizeOps:false,sanitizeResources:false}, async t=>{
    await testDB(async sql => {
      assertOk(await ddl(sql))
      await sql`insert into task values ${sql(task)}`
      t.step('popTask', async ()=>assertEquals((await popTask(sql)).ok[0], task))
      t.step('upsertFiling', async ()=>assertOk(async()=>await upsertFiling(sql, {id:1})))
    })
  })
But I get this error Started test step while another test step with sanitizers was running:
5 replies
DDeno
Created by FjordWarden on 6/15/2023 in #help
Deno hangs on error
Why does Deno hang when XML.parse throws an error? 
let text = '<xml><xbrli:xbrl><hi>Hello</hi></xbrli:xbrl></xml>'
import * as XML from "https://deno.land/x/xml/mod.ts"

let parseXml = text => {
  try{
    return XML.parse(text)
  }catch(e){
    return null
  }
};

parseXml(text)
console.log('ok')
try{
  parseXml('fail')
}catch(e){
  console.log(e)
}
let text = '<xml><xbrli:xbrl><hi>Hello</hi></xbrli:xbrl></xml>'
import * as XML from "https://deno.land/x/xml/mod.ts"

let parseXml = text => {
  try{
    return XML.parse(text)
  }catch(e){
    return null
  }
};

parseXml(text)
console.log('ok')
try{
  parseXml('fail')
}catch(e){
  console.log(e)
}
2 replies
SSolidJS
Created by FjordWarden on 5/16/2023 in #support
How to iterate over Object.entries()?
How does one use <index> or <for> together with Object.entries(obj) 
function Example() {
  const [schema] = createSignal({'paths':{'/foo':{'a':'a'},'/bar':{'b':'b'}}})
  return <Index each={Object.entries(schema().paths)}>{(k,i)=><div>{i} - {k()} - {k()[0]} - {k()[1]}</div>}</Index>;
}
function Example() {
  const [schema] = createSignal({'paths':{'/foo':{'a':'a'},'/bar':{'b':'b'}}})
  return <Index each={Object.entries(schema().paths)}>{(k,i)=><div>{i} - {k()} - {k()[0]} - {k()[1]}</div>}</Index>;
}
this only seems to work for {k()[0]}, and not {k()[1]} Playground example: https://playground.solidjs.com/anonymous/349c6400-367b-4856-938a-8cf5b4208aea In the console it logs: ​Unrecognized value. Skipped inserting {a: 'a'}
4 replies
SSolidJS
Created by FjordWarden on 5/10/2023 in #support
createResource does not working with json()
Why does text() work but json() does not: 
let [schema1] = createResource(async _ => await (await fetch(`https://api.localhost/`)).json());
let [schema2] = createResource(async _ => await (await fetch(`https://api.localhost/`)).text())
let [schema1] = createResource(async _ => await (await fetch(`https://api.localhost/`)).json());
let [schema2] = createResource(async _ => await (await fetch(`https://api.localhost/`)).text())
I am sure the content I get back is valid JSON and changing the content type has no effect. I can't think of a reason why this difference in behaviour?
3 replies
SSolidJS
Created by FjordWarden on 4/25/2023 in #support
Abort resource
I am building some full text search input field and got the basic thing working. Next I want to add support to abort the previous fetch request because they can take a while and currently they build up with every token I type. This is my current attempt at a solution, but it has a problems. I never finishes the any fetch because it is aborted in the effect at the same time the resource runs. What is the suggested solution to accomplish this, I can't be the first to try this but I find very little info on how to do this with SolidJs. 
const controller = new AbortController();
  const [form,setForm] = createStore({text:'',limit:10}),
    query = ()=>[`limit=${form.limit}`,form.text?`text=fts(english).${form.text}`:null].filter(e=>e!==null).join('&'),
    [files] = createResource(query, async q => {
      let result = [];
      try { result = await(await fetch(`${ENDPOINT}/company?${q}`,{signal:controller.signal})).json(); }
      catch(e) { console.log({e}) } return result
    });
  onMount(()=>createEffect(()=>{query();console.log('abort');controller.abort()}))
const controller = new AbortController();
  const [form,setForm] = createStore({text:'',limit:10}),
    query = ()=>[`limit=${form.limit}`,form.text?`text=fts(english).${form.text}`:null].filter(e=>e!==null).join('&'),
    [files] = createResource(query, async q => {
      let result = [];
      try { result = await(await fetch(`${ENDPOINT}/company?${q}`,{signal:controller.signal})).json(); }
      catch(e) { console.log({e}) } return result
    });
  onMount(()=>createEffect(()=>{query();console.log('abort');controller.abort()}))
2 replies
SSolidJS
Created by FjordWarden on 4/19/2023 in #support
Context undefined
I want to wrap my auth token from local storage in a ContextProvider. To this effect I've done this: 
const TokenContext = createContext();

export function TokenProvider(props) {
  const [getToken, setToken, {remove}] = createStorageSignal('token', { api: cookieStorage }),
    token = [getToken,{login(token) {setToken(token)}, logout() {remove()}}];
  return <TokenContext.Provider value={token}>{props.children}</TokenContext.Provider>
}

export function useToken() { return useContext(TokenProvider); }
const TokenContext = createContext();

export function TokenProvider(props) {
  const [getToken, setToken, {remove}] = createStorageSignal('token', { api: cookieStorage }),
    token = [getToken,{login(token) {setToken(token)}, logout() {remove()}}];
  return <TokenContext.Provider value={token}>{props.children}</TokenContext.Provider>
}

export function useToken() { return useContext(TokenProvider); }
What am i doing wrong?
6 replies