antonymott Github contribution chart
antonymott Github Stats
antonymott Most Used Languages

Activity

02 Dec 2022

Issue Comment

Antonymott

Fix support for mui

Changes

  • Adds configuration for mui
  • Closes https://github.com/withastro/astro/issues/4079

Forked On 02 Dec 2022 at 04:41:37

Antonymott

This is huge! Astro with React+MUI. Thanks so much! @LuckyArd110 : the way I used MUI was pretty much standard, added it to a React component, then consumed that component in a .astro page. Can't say I've tried lots of mui styling, but I can confirm the following works: pnpm add @mui/material @mui/x-data-grid @mui/system. I haven't deployed, but an MUI data-grid works well in dev and production mode. From what I gather, the Astro core team worked to get MUI working but won't announce it until the next release. Having an excellent quality grid component styling (like MUI) is very helpful, especially as I can confirm that neither React AG-grid or the new Solid AG-grid work in prod mode with Astro 1.6.10

Commented On 02 Dec 2022 at 04:41:37

Antonymott

started

Started On 22 Nov 2022 at 04:32:51

Antonymott

started

Started On 20 Nov 2022 at 03:59:15

Antonymott

started

Started On 19 Nov 2022 at 07:15:55
Issue Comment

Antonymott

SolidJs "fetch" example by Niall on YouTube stuck at "loading"

I'm submitting a ... (check one with "x")

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support' 

Providing a Reproducible Scenario Code-along with Niall's YouTube video on SolidJS breaks at 2:30 (fetch) https://www.youtube.com/watch?v=0yksxqGDdqQ&t=15s

Current behavior The "fetch" when coded identically, grid UI shows "loading", console log: Uncaught (in promise) TypeError: rowData.map is not a function. DevTools->Network shows fetch response is OK (all data is fetched)

Expected behavior Grid to load as it does earlier in Niall's YouTube video (static and reactive versions of the example code work fine earlier in the same video)

Please tell us about your environment: Ubuntu, VScode, Vite: identical to Niall's SolidJs template-setup on the video

  • AG Grid version: 28.2.1

  • Browser: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'

  • Language: TypeScript 4.9.3

Forked On 16 Nov 2022 at 10:16:49

Antonymott

Fixed!

Well, I found the problem, as there's no actual solid-js 'fetch' example code on the ag-grid docs or repo yet, just the code in Niall's intro video!

What's missing on Niall's VScode screen is: ".then(result => result.json())"

Viewers coding along with Niall's SolidJS video who want the 'fetch' section to work need to change line 13 to:

await fetch(`https://www.ag-grid.com/example-assets/olympic-winners.json`).then(result => result.json()) 

then your good to go!

Thanks again Niall for adding SolidJS...awesome!

Commented On 16 Nov 2022 at 10:16:49
Issue Comment

Antonymott

astro-solid-apolloclient integration not working

Describe the bug

Integration with Astro and apolloclient (@merged/solid-apollo) does not fetch graphql sample data as does the React example. This is probably not a bug with solid-js, more likely an implementation opportunity for @merged/solid-apollo.

Why did I file here and not over at @merged/solid-apollo? Hoping to help speed up the adoption of solid-js more broadly! Svelte-apollo npm package has ~ 1,500 weekly downloads compared to less than 20 of @merged/solid-apollo...for a package not specifically for Astro integration.

I have a hunch that if we (I) maintain a starter template Astro-solid-apolloclient that just works out of the box, it might accelerate other devs to try out solid+astro for projects that can benefit from graphql.

Your Example Website or App

https://github.com/antonymott/astro-solid-apolloclient

Steps to Reproduce the Bug or Issue

I set up the above repo to contain both Astro + React + ApolloClient example (working) and an attempt to make it work with solid-js instead of react, so the src also includes solidApp.jsx and solidClient.jsx.

If you fork it and run pnpm dev as is, you'll see the working React + Astro + ApolloClient (success screenshot below).

To test the solid-js implementation, you only need to uncomment line 8 of /src/layouts/Layout.astro:

// import Client from "../components/solidClient.jsx"

...and then comment line 9: import Client from "../components/client.jsx"

The fetched data should appear under the "solid component here" placeholder, but nothing at all appears (and no errors).

To fully recreate the base case using React and then play around to get solid-js working:

  1. pnpm create astro@latest
  2. add UI integrations to your new Astro project solid.js and react (e.g. to add solid.js https://docs.astro.build/en/guides/integrations-guide/solid-js/)
  3. then follow the Apollo client tutorial (based on React) here

Expected behavior

Fetched data displaying text and images correctly. The solid-js version shows nothing.

This repo contains two Astro + ApolloClient UI integrations: React and solid-js and is an adaptation of this tutorial of Apollo's Client in Astro using @merged/solid-apollo npm package.

Screenshots or Videos

The React version works fine, looks like this: Screenshot from 2022-11-05 11-12-04

Platform

  • linux
  • chrome
  • solid-js version: 1.6.1

Additional context

Astro with solid-js is an interesting (fast/simple/opt-in-complexity) alternative to React. I'm guessing lots of devs would also like to put UX first and let go of the virtual DOM, but there aren't a lot of starter projects that to jump start conversions.

The solid-js examples have helped me, so I'm trying to help contribute to the solid-js community with this base template. I did start down the rabbit hole and worked on the issue myself but quickly encountered cryptic errors like "Error: Comp is not a function", which @ryansolid helped solve 3 years ago but under different conditions (issue #97)

As I learn from making this example work, I'm happy to maintain a repo of the working example as a starter template to help others who'd like scaffolding to move from React to Solid.

Forked On 12 Nov 2022 at 03:15:46

Antonymott

Closing as perhaps this issue is not a priority for solid-js users at the moment. After I've done more research I may open an issue or hopefully a pull request (if I solve it) over at @merged/solid-apollo. Fortunately, the workaround for the time being is that the astro-react-apolloclient works fine.

For anyone from the solid community who comes across the same issue, I did do some further tinkering. We have to add "cache: new InMemoryCache()" to the new ApolloClient from @merged/solid-apollo, but Astro interprets the component as a React component upon rehydrating, causing errors, even with the explicit client directive: client:only="solid-js".

Commented On 12 Nov 2022 at 03:15:46

Antonymott

started

Started On 11 Nov 2022 at 08:23:17
Create Branch

Antonymott

Description not entered by the user.

On 05 Nov 2022 at 12:50:25

Antonymott

Description not entered by the user.

On 05 Nov 2022 at 12:21:34

Antonymott

started

Started On 28 Oct 2022 at 05:26:24
Issue Comment

Antonymott

autobahn js => es6 ?

Is there an es6 transpilation of autobahn.js? I googled but couldn't find autobahn.mjs or links to an es6 version. I'm trying out autobahn with Deno which doesn't work easily with node code unless it's es6.

Forked On 28 Oct 2022 at 02:32:23

Antonymott

Yeah, I dug into the code a bit more and fixed the 4 problems locally. If there aren't many use cases like this, perhaps there's nothing more to be done at this time, and perhaps we just close this issue? For anyone in the future wanting a quick fix for the same issue, I made the deno.land complaints go away by editing (locally) the npm package autobahn-browser: first I switched to the un-minified version (which you or some thoughtful maintainer helpfully included in the package!). Once I switched to autobahn.js as default, it was easy to fix 3 of the 4 issues, the code "!x in y" is parsed as "(!x) in y" by adding parentheses to get "!(x in y)". Finally, I changed line 1614 j = eval('(' + text + ')'); as direct eval with a bundler was not recommended. Deno minifies and bundles js so no production performance is affected by using the edited un-minified version in the npm package. Hope this helps someone!

Commented On 28 Oct 2022 at 02:32:23

Antonymott

started

Started On 26 Oct 2022 at 07:00:15
Issue Comment

Antonymott

Linting in VS Code not working when using enableProjectDiagnostics

I set up a simple deno project with only this file. But the linting is messed up. It looks like the default TypeScript language server is still parsing this file, even though I have installed the extension.

import { cron } from 'https://deno.land/x/deno_cron@v1.0.0/cron.ts';
import { config } from 'https://deno.land/x/dotenv@v2.0.0/mod.ts';

console.log('cron initiated: ', new Date());

cron('*/5 * * * *', async () => {
  await fetch("bla")
}); 

My workspace settings:

{
  "deno.lint": true,
  "deno.unstable": true,
  "deno.enable": true
} 

Forked On 26 Oct 2022 at 02:43:40

Antonymott

Linting error not suppressed as of Oct 26, 2022, mentioned in this Astro Deno SSR adapter issue

Commented On 26 Oct 2022 at 02:43:40
Create Branch

Antonymott

Description not entered by the user.

On 24 Oct 2022 at 01:54:29
Create Branch

Antonymott

Description not entered by the user.

On 24 Oct 2022 at 01:54:28

Antonymott

started

Started On 24 Oct 2022 at 01:40:32

Antonymott

started

Started On 19 Oct 2022 at 09:35:03

Antonymott

started

Started On 19 Oct 2022 at 08:59:46

Antonymott

update readme language sidebar

Created On 19 Oct 2022 at 03:18:31

Antonymott

fix KNOWN_LANGUAGES option child element for multi-language support

Created On 19 Oct 2022 at 02:52:35

Antonymott

fix KNOWN_LANGUAGES option child element

adding a 2nd (or more) languages causes hydration errors and ReactDOM warnings (see screenshot) complaining about child tags of option

Pushed On 19 Oct 2022 at 02:24:32

Antonymott

update readme language sidebar

Created On 18 Oct 2022 at 06:19:11

Antonymott

update readme language sidebar

config.ts (docs example) support sections as array

Pushed On 18 Oct 2022 at 06:03:55