profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/rschristian/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Ryan Christian rschristian @homepartners Chicago, IL Software Engineering @homepartners

preactjs/wmr 3893

👩‍🚀 The tiny all-in-one development tool for modern web apps.

mutoe/preact-realworld-example-app 31

Exemplary realworld application built with Preact

rschristian/github-contribution-calendar-api 4

API server for retrieving data used in GitHub's contribution calendar

rschristian/preact-github-calendar 2

Preact Component that Displays a User's GitHub Contribution Calendar

rschristian/InstagramScraper 1

C# Desktop app that will scrape all images and videos from an Instagram profile.

rschristian/microbundle-component 1

Example for Slack

rschristian/microbundle-types-demo 1

For https://github.com/developit/microbundle/issues/826

rschristian/aox 0

Archiveopteryx—An advanced PostgreSQL-based IMAP/POP server

startedmapbox/pixelmatch

started time in 3 hours

pull request commentrschristian/preact-github-calendar

chore(deps): Bump y18n from 4.0.0 to 4.0.1

OK, I won't notify you again about this release, but will get in touch when a new version is available. If you'd rather skip all updates until the next major or minor version, let me know by commenting @dependabot ignore this major version or @dependabot ignore this minor version.

If you change your mind, just re-open this PR and I'll resolve any conflicts on it.

dependabot[bot]

comment created time in 5 hours

created repositorynatemoo-re/micromatter

created time in 7 hours

startednathanwhit/minimal-yaml

started time in 7 hours

issue openedpreactjs/preact-cli

HMR doesn't work anywhere except in root?!

Bootstrapped new project using preact-cli with the Simple template. Running npm run dev or preact watch and after inspecting the devtools console this is the only message: [HMR] Waiting for update signal from WDS... But when I do some changes in src/components/test.jsx the page doesn't update, however if I do something in src/index.js HMR seems to work just fine... So what am I doing wrong? What am I missing?

"preact-cli": "^3.0.5",
"preact": "^10.5.13",
"preact-render-to-string": "^5.1.19"

Tested with 2 browsers: latest Firefox and Chromium on Windows 10.

created time in 10 hours

issue openedpreactjs/preact-cli

`preact build` hanging after seemingly successful build when using react-query

  • [ ] Check if updating to the latest Preact version resolves the issue

Describe the bug When using react-query's useQuery, building with prerender (default) makes preact build hang indefinitely, after a seemingly successful build (no error message, and normal looking list of created files):

 Build  [======] 95% (1.6s) emitting
                 bundle.7e56a.css ⏤  445 B
              bundle.*****.esm.js ⏤  20.8 kB
           polyfills.*****.esm.js ⏤  2.18 kB
       route-home.chunk.e6c71.css ⏤  74 B
    route-home.chunk.*****.esm.js ⏤  288 B
    route-profile.chunk.62c75.css ⏤  77 B
 route-profile.chunk.*****.esm.js ⏤  469 B
        route-home.chunk.723ad.js ⏤  291 B
                       index.html ⏤  1.24 kB
                         200.html ⏤  829 B
               polyfills.3cf93.js ⏤  2.17 kB
     route-profile.chunk.8b71c.js ⏤  486 B
                  bundle.73fb3.js ⏤  20.8 kB

This doesn't hang, and does exit normally when using preact build --no-prerender There is also no problems running this with preact watch

To Reproduce

Steps to reproduce the behavior:

  1. Create default app with preact create
  2. Add react-query dep, in my case: "react-query": "^3.15.2"
  3. Change src/components/app.js to :
import { h } from 'preact';
import { Router } from 'preact-router';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

import Header from './header';

// Code-splitting is automated for `routes` directory
import Home from '../routes/home';
import Profile from '../routes/profile';

export const queryClient = new QueryClient()

const TestElement = () => {
	const { data, isLoading } = useQuery('test', () => 'test1')
	if (isLoading) {
		return (<span>Loading...</span>)
	}

	return (<span>{data}</span>)
}

const App = () => (
	<div id="app">
		<QueryClientProvider client={queryClient}>
			<Header />
			<TestElement />
			<Router>
				<Home path="/" />
				<Profile path="/profile/" user="me" />
				<Profile path="/profile/:user" />
			</Router>
		</QueryClientProvider>
	</div>
)

export default App;
  1. Run preact build

Expected behavior I would expect the build to exit after the files are built. In that test case, useQuery should receive instantly resolving test data, so I don't see the hang coming from "trying to get data to render".

This could of course be expected behaviour that I am not aware of, which I guess could be documented somewhere.

created time in a day

release omgovich/colord

v1.6

released time in 2 days

pull request commentomgovich/react-colorful

docs: Adding WMR to Preact usage section

Agree! Thanks @rschristian!

rschristian

comment created time in 2 days

push eventomgovich/react-colorful

Ryan Christian

commit sha 98b8df824fc6a21e238a6b9bf763221dce62d88b

docs: Adding WMR to Preact usage section

view details

push time in 2 days

PR merged omgovich/react-colorful

docs: Adding WMR to Preact usage section

With WMR being used a bit more now I figured it makes sense to add, just in case some user of yours reads that and thinks it's not supported.

And it does work flawlessly out of the box, which is great 😁

+1 -1

1 comment

1 changed file

rschristian

pr closed time in 2 days

startedokonet/react-scroll-sync

started time in 2 days

issue commentpreactjs/preact-cli

ERROR Template execution failed: TypeError: Cannot read property 'entry' of undefined

I had the same problem. Short explanation is that preact-cli expects 2 hardcoded entries for prerendering, and you'll get this error if you don't provide them. If I'm not mistaken, it's designed to work with only one entry module (and polyfills).

In this exact example the problem is that you are defining multiple custom entry chunks, and Preact is expecting only bundle and polyfills chunks.

The application I'm working on has a few public pages and an app that has a few more pages, and I wanted to separate them to have service worker only for non public pages and to have a smaller main bundle for public pages. My solution was:

  • extract .ejs template. There should be /tmp/preact-cli/template.tmp.ejs on Unix like systems after build. Since I had just 2 entries 2 different .ejs template files worked for me.
  • define my own entry based on this module. I simplified it because I'm using it only for production builds. This line is where you should change it to use your app root module https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/entry.js#L31
  • Replace template and chunks in HtmlWebpackPlugin plugins. Here's an example

Note that I'm not sure if this is an optimal solution at this point and I hope there will be a simpler solution after https://github.com/preactjs/preact-cli/issues/1108.

gabrielrtakeda

comment created time in 2 days

pull request commentomgovich/react-colorful

docs: Adding WMR to Preact usage section

Codecov Report

Merging #131 (735e642) into master (d55048d) will not change coverage. The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##            master      #131   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           33        33           
  Lines          422       422           
  Branches        57        53    -4     
=========================================
  Hits           422       422           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update d55048d...735e642. Read the comment docs.

rschristian

comment created time in 2 days

startedrschristian/ts-api-toolkit

started time in 3 days

startedmutoe/preact-realworld-example-app

started time in 3 days

startedrschristian/ts-api-toolkit

started time in 4 days

startedevanw/node-source-map-support

started time in 5 days

release omgovich/colord

v1.5

released time in 6 days

startedantfu/broz

started time in 6 days

issue closedomgovich/react-colorful

Include basic color conversion algorithms

I think we need some basic color conversion algorithm to ensure better performance. Right now using a third-party library like tinycolor2 causes app freeze.

Usecase: I want to allow the user to either choose a hex color or rgba color. We are storing hex code at the backend so whenever the user chooses a rgba color we need to convert that to a hex8 string. but since the RgbaColorPicker accepts RgbColor type we need to convert the color to that everytime the color changes. When you constantly do this in RgbaColorPicker it crashes the app.

Ways to reproduce: Open the code sandbox link: https://codesandbox.io/s/react-colorful-wlm00 Try changing the color continuously and quickly, it will work fine in case of rgb. Now move the alpha slider and try the same again, after some time it freezes.

closed time in 6 days

DanishShah

issue commentomgovich/react-colorful

Include basic color conversion algorithms

Thanks for the quick reply

DanishShah

comment created time in 6 days

startedoliver-moran/jimp

started time in 9 days

issue commentomgovich/react-colorful

Include basic color conversion algorithms

We're not planning to add all of the color conversion methods to the color picker itself since it increases the picker size ~3x times. react-colorful is a micro-library and it aims to be as small as possible.

BTW: If you looking for a better converter, check our new library out. It's 3 times faster than tinycolor2. https://github.com/omgovich/colord

DanishShah

comment created time in 9 days

issue commentomgovich/react-colorful

Include basic color conversion algorithms

Hi! Don't run the conversion on every tick and skip it if the value is already in the valid color space. We have an example in our README that illustrates a proper approach: https://codesandbox.io/s/6fp23?file=/src/CustomPicker.js

DanishShah

comment created time in 9 days

issue openedomgovich/react-colorful

Include basic color conversion algorithms

I think we need some basic color conversion algorithm to ensure better performance. Right now using a third-party library like tinycolor2 causes app freeze.

Usecase: I want to allow the user to either choose a hex color or rgba color. We are storing hex code at the backend so whenever the user chooses a rgba color we need to convert that to a hex8 string. but since the RgbaColorPicker accepts RgbColor type we need to convert the color to that everytime the color changes. When you constantly do this in RgbaColorPicker it crashes the app.

Ways to reproduce: Open the code sandbox link: https://codesandbox.io/s/react-colorful-wlm00 Try changing the color continuously and quickly, it will work fine in case of rgb. Now move the alpha slider and try the same again, after some time it freezes.

created time in 9 days

startedrschristian/ts-api-toolkit

started time in 9 days

startedbitgapp/eqMac

started time in 9 days

created repositorynatemoo-re/monorepo-template

created time in 10 days