50BytesOfJohn
50BytesOfJohn
Explore posts from servers
SSolidJSXXataKKinde
PostsComments
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
I think that the problem with this library may be that it's hard to find it, if you don't know about it. I was searching for solidjs phosphor icons, and I couldn't find this library. Only one outdated community package. Which means that many people may have the same issue. Also, this is personal opinion, but if I would need a single icon library, I would possibly prefer their official library than this one (based on simplicity and specific instructions, it feels easier, at least for me, if I read phosphor react docs and unplugin icons docs). On the other hand, I think that if I would start using unplugin icons now, I would probably use it in future in all the cases 😅
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
😮 Gonna try it, thanks!
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
Oh... That's cool, I haven't seen it. Thanks! Anyways, it fun to build the library, and probably will publish it anyways. Even if solid does not have server components. While using ssr rendering or pre-redenring or static rendering or whatever happens there the context is not available in this case I guess, cause I had some errors on solid start about using client side api on server. So I thought that this may cause some issues or at least inconsistency in initial render.
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
Will play around with it to see how it can work and look like with solid exports
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
@Brendonovich I need to look at the compiled fiels from the example repo. I wanted to avoid having one export, due to context usage, as in react version. I think that for SSR, it would be bad to start using context on client side, change of icon style. So wanted to be explicit and provide 2 options. Most libraries/examples covers just one export, so I had some troubles figuring it out.
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
For ssr, it generates a huge file, with content like this: 
import{ssr as a,ssrHydrationKey as h,ssrElement as Z,mergeProps as A,escape as t,createComponent as H}from"solid-js/web";var l=["<path",' d="M232,104a56.06,56.06,0,0,0-56-56H136a24,24,0,0,1,24-24,8,8,0,0,0,0-16,40,40,0,0,0-40,40H80a56.06,56.06,0,0,0-56,56,16,16,0,0,0,8,13.83V128c0,35.53,33.12,62.12,59.74,83.49C103.66,221.07,120,234.18,120,240a8,8,0,0,0,16,0c0-5.82,16.34-18.93,28.26-28.51C190.88,190.12,224,163.53,224,128V117.83A16,16,0,0,0,232,104ZM80,64h96a40.06,40.06,0,0,1,40,40H40A40,40,0,0,1,80,64Zm74.25,135c-10.62,8.52-20,16-26.25,23.37-6.25-7.32-15.63-14.85-26.25-23.37C77.8,179.79,48,155.86,48,128v-8H208v8C208,155.86,178.2,179.79,154.25,199Z"></path>'];const V={regular:a(l,h()),duotone:[a(["<path",
import{ssr as a,ssrHydrationKey as h,ssrElement as Z,mergeProps as A,escape as t,createComponent as H}from"solid-js/web";var l=["<path",' d="M232,104a56.06,56.06,0,0,0-56-56H136a24,24,0,0,1,24-24,8,8,0,0,0,0-16,40,40,0,0,0-40,40H80a56.06,56.06,0,0,0-56,56,16,16,0,0,0,8,13.83V128c0,35.53,33.12,62.12,59.74,83.49C103.66,221.07,120,234.18,120,240a8,8,0,0,0,16,0c0-5.82,16.34-18.93,28.26-28.51C190.88,190.12,224,163.53,224,128V117.83A16,16,0,0,0,232,104ZM80,64h96a40.06,40.06,0,0,1,40,40H40A40,40,0,0,1,80,64Zm74.25,135c-10.62,8.52-20,16-26.25,23.37-6.25-7.32-15.63-14.85-26.25-23.37C77.8,179.79,48,155.86,48,128v-8H208v8C208,155.86,178.2,179.79,154.25,199Z"></path>'];const V={regular:a(l,h()),duotone:[a(["<path",
For ssr-dom: 
import{getNextElement as a,template as Z,setAttribute as A,spread as v,insert as H,runHydrationEvents as h,createComponent as l,mergeProps as g}from"solid-js/web";var s=Z("<svg><path d=M232,104a56.06,56.06,0,0,0-56-56H136a24,24,0,0,1,24-24,8,8,0,0,0,0-16,40,40,0,0,0-40,40H80a56.06,56.06,0,0,0-56,56,16,16,0,0,0,8,13.83V128c0,35.53,33.12,62.12,59.74,83.49C103.66,221.07,120,234.
import{getNextElement as a,template as Z,setAttribute as A,spread as v,insert as H,runHydrationEvents as h,createComponent as l,mergeProps as g}from"solid-js/web";var s=Z("<svg><path d=M232,104a56.06,56.06,0,0,0-56-56H136a24,24,0,0,1,24-24,8,8,0,0,0,0-16,40,40,0,0,0-40,40H80a56.06,56.06,0,0,0-56,56,16,16,0,0,0,8,13.83V128c0,35.53,33.12,62.12,59.74,83.49C103.66,221.07,120,234.
For client side bundle, it generates an index with: 
export{IconContext}from"./lib/context.mjs";export{AcornIcon}from"./csr/AcornIcon.mjs";
export{IconContext}from"./lib/context.mjs";export{AcornIcon}from"./csr/AcornIcon.mjs";
And icons like that: 
import{createComponent as o,mergeProps as m}from"solid-js/web";import{weights as r}from"../icons/Acorn.mjs";import s from"../lib/CSRIconBase.mjs";const i=i=>o(s,m(i,{weights:r}));export{i as AcornIcon};
import{createComponent as o,mergeProps as m}from"solid-js/web";import{weights as r}from"../icons/Acorn.mjs";import s from"../lib/CSRIconBase.mjs";const i=i=>o(s,m(i,{weights:r}));export{i as AcornIcon};
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
Thanks both for the input, the solid-icons has some interesting approach. I've seen it before, but the approach is different than what I wanted to achieve, so I haven't use it like that. I haven't seen the solid lib starter before, it's good to know for the future. I think, that it would be best for me to try to push my changes and share a link to the repo. Maybe someone would be so kind to test it. But in short, I have 2 different exports for one icon. One is client-side only, that uses context and 2nd is from "<lib name>/ssr" that is not using context and supports ssr. For the ssr build, I'm building 2 versions from ssr input. 1 with generate for ssr, and one with generate for dom. Resulting in something like this in package.json: 
  "exports": {
    ".": {
      "import": {
        "types": "./dist/types/index.d.ts",
        "default": "./dist/index/index.mjs"
      }
    },
    "./ssr": {
      "worker": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr.js"
        }
      },
      "browser": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr-dom.js"
        }
      },
      "deno": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr.js"
        }
      },
      "node": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr.js"
        }
      },
      "import": {
        "types": "./dist/ssr/types/ssr.d.ts",
        "default": "./dist/ssr/ssr-dom.js"
      }
    }
  },
  "exports": {
    ".": {
      "import": {
        "types": "./dist/types/index.d.ts",
        "default": "./dist/index/index.mjs"
      }
    },
    "./ssr": {
      "worker": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr.js"
        }
      },
      "browser": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr-dom.js"
        }
      },
      "deno": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr.js"
        }
      },
      "node": {
        "import": {
          "types": "./dist/ssr/types/ssr.d.ts",
          "default": "./dist/ssr/ssr.js"
        }
      },
      "import": {
        "types": "./dist/ssr/types/ssr.d.ts",
        "default": "./dist/ssr/ssr-dom.js"
      }
    }
  },
Apparently, this works really well with solid-start. I mean, no hydration errors at least 😅
18 replies
SSolidJS
Created by 50BytesOfJohn on 12/11/2024 in #support
Missing SSR component after client side navigation (help with icons library SSR)
I'm not sure but maybe I figured it out, it seems that I can do 2 builds for SSR, one with ssr and one with dom. Then in package.json I can export dom version for browser and by default and ssr for node/deno etc. For now it works fine, not sure if this is best approach 😉
18 replies
XXata
Created by 50BytesOfJohn on 7/25/2024 in #help
Is it possible to restrict api key to specific branch only?
Great. Voted. Thanks for the info. Will be waiting for this update.
4 replies
XXata
Created by AD Amorim on 7/18/2024 in #help
what is the ideal column type to store the content of a Tiptap editor?
@AD Amorim not sure about the performance of such approach but in case of bigger documents maybe you could store it as files in some storage like AWS S3, or maybe even xata file storage and just keep the reference to the file in database.
10 replies
XXata
Created by AD Amorim on 7/18/2024 in #help
what is the ideal column type to store the content of a Tiptap editor?
Hey, I'm actually using xata and tiptap in one project. I was also wondering about the approach and reading about this for a while, as it's kinda not obvious and it also depends on use case and what features do you need. I'm using basic editor stuff, like simple formatting and code blocks. After user edits etc. I'm sending html, and processing it with rehype pipeline, some sanitization, code highlighting etc. and then saving the produced html to text column. When the user wants to edit document, i'm loading this html to tiptap. For now I haven't seen any issues, tiptap understands the formatted html without issues, performance is okey and everything is cool. I belive that the problem may be when you need to start using some very specific or complicated stuff, like some custom nodes, comments, collaboration. Then I think it's better to keep both HTML and JSON, where html can be used to speed up the rendering (no need to always convert JSON to HTML), and JSON can be used when user want's to edit the document. I found this approach to be used by many people while researching this topic. When it comes to the column type for JSON, I'm not so experienced, but if you won't be filtering db by the fields from that JSON, I think you can use text column for stringified JSON as well. Some better postgres expert can say if there's any difference :D. Also, as @Oreki mentioned, keep in mind field limits if a document is huge.
10 replies
KKinde
Created by 50BytesOfJohn on 7/7/2024 in #💻┃support
Sometimes when a user is logged out, it's redirected to kinde page
So for my app, I have all routes protected with middleware. I have defined site URL, post login, post logout URLs in env, all set for my app homepage. I know it may be hard to help me here, as I'm not able to fully reproduce it. I mean, sometimes when I open the app after some time on tablet (so I believe session expires), I see this kinde page. But sometimes, especially on PC, it's just showing the login page normally. I just thought that maybe you are aware of such thing already. Would it be possible to add a setting or something, that would show something like "Back to app" or "Back to website" button on that page. Even just in case someone is lost and see this page? Since it's a different domain it may be confusing, and I believe such a button could be helpful, with customized link or just link to app homepage that's already in settings I think.
8 replies
KKinde
Created by 50BytesOfJohn on 7/7/2024 in #💻┃support
Sometimes when a user is logged out, it's redirected to kinde page
Hey, thanks for reply. I'm using the nextjs sdk, with withAuth middleware
8 replies