WIP|Implement for react-native-web #112

jacob-israel-turner · 2021-03-07T21:34:58Z

No description provided.

Allows us to add typedef and import implementation from different locations based on plaform

This reverts commit dbb5e91.

jacob-israel-turner · 2021-03-07T21:35:33Z

example/ios/Podfile

@@ -1,9 +1,14 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

+use_modular_headers!


I could not get the current iOS example to run without these changes.

jacob-israel-turner · 2021-03-07T21:37:42Z

src/blurhashModule.ts

@@ -0,0 +1,12 @@
+import { NativeModules, Platform } from 'react-native';
+const BlurhashModule: BlurhashModule = Platform.select({
+  web: null,


jacob-israel-turner · 2021-03-07T21:38:31Z

src/index.tsx

@@ -123,7 +122,10 @@ export class Blurhash extends React.PureComponent<BlurhashProps> {
 		if (this.props.onLoadEnd != null) this.props.onLoadEnd();
 	}
 	_onLoadError(event?: NativeSyntheticEvent<{ message?: string }>) {
-		if (this.props.onLoadError != null) this.props.onLoadError(event?.nativeEvent?.message);
+		if (this.props.onLoadError != null) {
+      const message = event?.nativeEvent?.message; // TODO: Not sure how to get proper value here on web


jacob-israel-turner · 2021-03-07T21:38:58Z

src/index.tsx

@@ -132,16 +134,14 @@ export class Blurhash extends React.PureComponent<BlurhashProps> {
 				{...this.props}
 				onLoadStart={this._onLoadStart}
 				onLoadEnd={this._onLoadEnd}
-				// @ts-expect-error


This was giving me a build error

jacob-israel-turner · 2021-03-07T21:41:10Z

src/index.tsx

-	// @ts-expect-error this second argument is still not public, but probably required for TurboModules.
-	Blurhash,
-);
+const NativeBlurhashView = Platform.OS === 'web' ? require('./web/blurhashView').default : requireNativeComponent<BlurhashProps>(


I tried a couple iterations of this.

Setting NativeBlurhashView as a let then assigning within an if statement, caused issues with Typescript. Didn't like that it was unset for a short period.

Using Platform.select still caused reuireNativeComponent to be called on web. In react-native, irrelevant Platform.select branches are removed at build time - doesn't look like that happens with react-native-web, unfortunately.

jacob-israel-turner · 2021-03-07T21:41:39Z

src/web/blurhashView.tsx

+export default function BlurhashView ({
+  blurhash,
+  decodeHeight = 128,
+  decodePunch,


Need to test and ensure punch is implemented properly.

jacob-israel-turner · 2021-03-07T21:41:50Z

src/web/canvas.tsx

+};
+
+export default function BlurhashCanvas ({
+  // TODO: See how canvas handles unset width/height


Suggested change

// TODO: See how canvas handles unset width/height

jacob-israel-turner · 2021-03-07T21:46:55Z

I'd also like to cleanup the commit history before this merges.

jacob-israel-turner · 2021-03-07T21:48:06Z

@mrousavy looks like the linting step failed because package-lock.json has gotten out of sync. Would you like me to use yarn.lock, package-lock.json, or both?

jacob-israel-turner · 2021-03-08T17:53:01Z

Received the following from @mrousavy via email, figured it would make sense to reply here:

I don't think you should install expo

Do note - I only added expo to the example repo. The library is unaffected. I did this, because setting up a raw react-native-web project is fairly involved. I spent about an hour doing this before I jumped into some other example repos on react-native-web -compatible libraries. Specifically, you linked to react-native-slider as a pattern to build react-native-web support, and they use expo-web for their example. If you feel strongly about this, I can revisit setting up a raw react-native-web instead of expo-web - but this will likely add at least a few hours of work.

I don't think requireNativeComponent should be removed. I think rn-web has a polyfill for that.

Hmm, I'll look into this, but I don't think this right. requireNativeComponent was definitely failing on web, with undefined is not a function. I'll look through their docs to see if I can find anything.

Also, try making use of the .web.tsx extension to override anything.

I'll look into this - but our use-case here doesn't 100% match what you'd typically use the .web/.native fork for. In this case, you're requiring native files, which don't work with the .web/.native pattern. Only for web is the module and "native" view going to be in JavaScript.

As for the TS error - make sure you're using the project's installed tsc instead of your global.

I'll look into this and see what's going on - honestly not sure which version I'm using.

I'm not very experienced with TypeScript, so I'm happy to take any recommendations for better typing.

mrousavy · 2021-03-08T17:57:03Z

I see, I'll take a look at this and if it's really that difficult we'll just stick with expo for now.
Yup, I browsed the rn-web source code and requireNativeComponent is actually not exported.
You can just use .web.tsx to override the "normal" module. Example; Create a BlurhashModule.ts file which returns the result of requireNativeComponent, and BlurhashModule.web.ts which returns the web version of that. Everything in index.tsx operates the same.
Yeah well everything is setup that you can just use VSCode with the ESLint extension and it will even automatically format everything on save. Make sure to select the TypeScript version in the command palette (I think in the latest insider they removed that)

jacob-israel-turner · 2021-03-29T04:39:35Z

src/blurhashModule.web.ts

+const loadImage = (src: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const img = document.createElement('img');
+    img.crossOrigin = 'Anonymous';


Source: https://stackoverflow.com/a/27840082/4181365

jacob-israel-turner · 2021-03-29T04:55:02Z

@mrousavy I have a couple of TODO's left in the code here, but I'm pretty happy with where things are and I believe I've addressed your main concerns. Any other feedback or requests on this?

jacob-israel-turner · 2021-03-30T15:39:40Z

@mrousavy Sorry to be a squeaky wheel - I'm really excited to implement this in our app! 😂

Any chance you'd be able to look at this in the next couple days?

mrousavy · 2021-03-30T15:50:46Z

Hey! I understand, I also hate it when maintainers take too long to merge a perfect PR. Unfortunately I'm really really busy with the upcoming launch, but I'll promise I'll look into this sometime this week 🤞

Thanks for your awesome work!

mrousavy · 2021-04-02T19:30:45Z

Okay so before I review the code - there are a few things I don't like, can you tell me if there are alternative solutions for those?

We now depend on the blurhash library. Now every single react-native user has to unnecessarily install that blurhash library from npm too (automatically, but still increases bundle size and download time for npm install)
I don't want to include expo in the example. I'd rater use the bare react-native-web setup, ideally configured with ESBuild.

Do you think those are things that can be addressed?

jacob-israel-turner · 2021-04-02T21:01:33Z

This is a good point. Probably doing a "blurry" dev dependency is the best option. I'll play around with this. This will require updating the install step of the docs to include blurhash if you want to use web.
What is your hesitation with having expo in the example? I looked around at a few other web-compatible React Native libraries, and several use expo. It's super easy to setup and adds zero dependencies to the final product. I can look into doing a bare react-native-web setup again - but frankly if it takes more than a couple of hours to switch over it's probably not worth the time.

mrousavy · 2021-04-06T14:11:02Z

Ideally there should be no changes to the native libs, that includes no increased bundle size (which would be the case if we installed react-blurhash or just blurhash as a dependency) etc.
That's not a problem with .web.tsx files as those get optimized away anyways. On the other hand I think I can use the blurhash lib for a few things I'm doing by hand in JS right now, I'll take a look at that when I get home.

My hesitation with expo is that it is a pretty big framework which is just installed to wrap a simple demo with react-native-web. It is definitely possible to only use rn-web and the official docs also show those steps. I received a PR for web support in my MMKV library which does not use expo, so maybe you can get some inspiration from there: mrousavy/react-native-mmkv#45

jacob-israel-turner · 2021-04-09T19:49:11Z

Additional warning to handle, before merging: SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021.

jacob-israel-turner · 2021-04-09T22:44:54Z

@mrousavy I'm a little confused by the build step, and distribution step here.

I'm finding locally, after building, a different result than what I get if I install from NPM. This is causing an issue in our web project because it isn't setup to use optional chaining (where react-native has supported it for a while).

I can go add support in our project if needed.

But I am confused, since the locally built file for react-native-blurhash under /lib/module/index.js looks like this:

And the file downloaded from NPM under dist/index.js looks like this:

Should the file published to NPM compile out the optional chaining syntax? Or should I update my project to compile it properly?

This reverts commit 5dbb7af.

mrousavy · 2021-04-20T08:36:51Z

@jacob-israel-turner I'm sorry for the delay, I'm in the middle of launching our startup right now. I promise I'll look into this when I have some more free time 🤞

RWOverdijk · 2022-02-28T08:42:00Z

Did your startup succeed yet? 😄

mrousavy · 2022-02-28T09:37:32Z

Haha, no it did not. My new company is doing great though, and I think the PR needs to be rebased to be merged

iM-GeeKy · 2024-08-14T10:08:10Z

@jacob-israel-turner @mrousavy Is there any plans to get this feature into the project?

jacob-israel-turner · 2024-08-23T19:38:15Z

@iM-GeeKy @mrousavy I'm not going to put any more effort into this PR - I am no longer working on the project I was using blurhash for, and I am not currently working on any React Native or React Native Web projects. It's probably best to close this PR and open a new one, given branch drift.

mrousavy · 2024-08-27T10:38:13Z

@jacob-israel-turner Sorry for not reviewing/merging this back then. And still thank you very much for your efforts, I'm sure this will be helpful as a reference to implement web support at some point in the future 🙏

jacob-israel-turner added 13 commits March 7, 2021 09:36

Move BlurhashModule to its own file

dde7d52

Allows us to add typedef and import implementation from different locations based on plaform

TEMP|Trying web with webpack

dbb5e91

Revert "TEMP|Trying web with webpack"

133aae7

This reverts commit dbb5e91.

Add prepare:dev script

22bacde

Add react-native-web/expo-web in examples

5dbb7af

Enhance prepare:dev

d167339

Get web example running

67c70b1

Initial implementation of web working

56d8196

Tidy up

adf71c5

Note

318d43c

Get iOS example to build

e9d4d2c

Fix native platforms

c27164d

Apply styles to container

f81736f

jacob-israel-turner commented Mar 7, 2021

View reviewed changes

Fix linting

bada2a4

jacob-israel-turner mentioned this pull request Mar 7, 2021

[FEATURE] Web support #43

Open

jacob-israel-turner added 3 commits March 28, 2021 21:38

Create .web files

ce59868

Cleanup

ea7c389

Build web BlurhashModule

6617368

jacob-israel-turner commented Mar 29, 2021

View reviewed changes

jacob-israel-turner added 4 commits March 28, 2021 22:41

Run prettier

9ac4819

Update package-lock.json

af2a8f9

Run Prettier on /example

7140010

Cleanup

9d93f26

Move blurhash to peer dependencies

cd22852

jacob-israel-turner added 2 commits April 9, 2021 18:45

Add blurhash to dev dependencies

3720989

Remove expo-web

777befb

This reverts commit 5dbb7af.

jacob-israel-turner closed this Aug 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP|Implement for react-native-web #112

WIP|Implement for react-native-web #112

jacob-israel-turner commented Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner Mar 7, 2021

jacob-israel-turner commented Mar 7, 2021

jacob-israel-turner commented Mar 7, 2021

jacob-israel-turner commented Mar 8, 2021 •

edited

Loading

mrousavy commented Mar 8, 2021

jacob-israel-turner Mar 29, 2021

jacob-israel-turner commented Mar 29, 2021

jacob-israel-turner commented Mar 30, 2021

mrousavy commented Mar 30, 2021 •

edited

Loading

mrousavy commented Apr 2, 2021

jacob-israel-turner commented Apr 2, 2021

mrousavy commented Apr 6, 2021

jacob-israel-turner commented Apr 9, 2021

jacob-israel-turner commented Apr 9, 2021

mrousavy commented Apr 20, 2021

RWOverdijk commented Feb 28, 2022

mrousavy commented Feb 28, 2022

iM-GeeKy commented Aug 14, 2024

jacob-israel-turner commented Aug 23, 2024

mrousavy commented Aug 27, 2024

WIP|Implement for react-native-web #112

WIP|Implement for react-native-web #112

Conversation

jacob-israel-turner commented Mar 7, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacob-israel-turner commented Mar 7, 2021

jacob-israel-turner commented Mar 7, 2021

jacob-israel-turner commented Mar 8, 2021 • edited Loading

mrousavy commented Mar 8, 2021

Choose a reason for hiding this comment

jacob-israel-turner commented Mar 29, 2021

jacob-israel-turner commented Mar 30, 2021

mrousavy commented Mar 30, 2021 • edited Loading

mrousavy commented Apr 2, 2021

jacob-israel-turner commented Apr 2, 2021

mrousavy commented Apr 6, 2021

jacob-israel-turner commented Apr 9, 2021

jacob-israel-turner commented Apr 9, 2021

mrousavy commented Apr 20, 2021

RWOverdijk commented Feb 28, 2022

mrousavy commented Feb 28, 2022

iM-GeeKy commented Aug 14, 2024

jacob-israel-turner commented Aug 23, 2024

mrousavy commented Aug 27, 2024

jacob-israel-turner commented Mar 8, 2021 •

edited

Loading

mrousavy commented Mar 30, 2021 •

edited

Loading