pmndrs / its-fine Goto Github PK
View Code? Open in Web Editor NEW🐶🔥 A collection of escape hatches for React.
Home Page: https://npmjs.com/its-fine
License: MIT License
🐶🔥 A collection of escape hatches for React.
Home Page: https://npmjs.com/its-fine
License: MIT License
I'm still investigating, but it seems like root.memoizedState
is null
and also ReactCurrentOwner.current
is null
when replayFunctionComponent
is called. This causes useFiber
to return null, which also breaks the ContextBridge
.
I think this is because the root FiberProvider is rendered at another time than the element itself.
This is happening in Next 13.2, but only sometimes (I think if the page is lagging React switches to use the concurrent features).
I will edit the issue when I know more.
Hi,
When following the setup guide for React Native here: https://docs.pmnd.rs/react-three-fiber/getting-started/installation
The following error occurs, running inside Expo Go on iOS:
While trying to resolve module
its-fine
from file /Users/admin/React Native/three/node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.prod.js
, the package /Users/admin/React Native/three/node_modules/its-fine/package.json
was successfully found. However, this package itself specifies a main
module field that could not be resolved (/Users/admin/React Native/three/node_modules/its-fine/dist/index.cjs
. Indeed, none of these files exist:
- /Users/admin/React Native/three/node_modules/its-fine/dist/index.cjs(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
/Users/admin/React Native/three/node_modules/its-fine/dist/index.cjs/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
Dependencies
"dependencies": {
"@react-three/fiber": "^8.8.6",
"expo": "~46.0.13",
"expo-gl": "~11.4.0",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.6",
"three": "^0.144.0"
},
"devDependencies": {
"@babel/core": "^7.12.9"
},
Last day i updated my npm packages and got this error:
./node_modules/its-fine/dist/index.mjs
Can't import the named export 'Component' from non EcmaScript module (only default export is available)
Hi,
I tried to use its-fine together with tunnel-rats. Each tunnel having a different context provider.
However, its-fine spreads only one context provider to all tunnels, namely the last. The reason seems to be here:
Line 187 in 3839c0a
If we move these two variables within the useContextBridge
, the issue is resolved.
You can have a look into this codesandbox: https://codesandbox.io/s/compassionate-varahamihira-yxqqu7?file=/src/App.tsx
Check the console. CompDOM
and CompNIL
are the same except that NIL consumes context via its-fine. To try the correct version, just comment out import ... 'its-fine'
and uncomment import ... './itsFine'
Check the video on how to do it.
It also shows where contexts
and variables
are placed within useContextBridge
.
Hi ,
I am using react and react-dom 17 version in my app and I can't migrate to it version 18 because many npm package that I have installed are not fully compatible with react 18
Hence here I am getting this error here
ERROR in ./node_modules/its-fine/dist/index.js 67:13-24
export 'useId' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
So How to resolve this , I have no idea that this package is a dependency package of some other package or what but I have not installed this package in my app
Without calling root.render()
, the ContextBridge doesn't update.
In the example below, the context in the Canvas does not update, the number stays 42.
Do you know any workaround for this?
const NumberContext = createContext<number | undefined>(undefined);
function Number() {
const number = useContext(NumberContext);
return <p>number: {number ?? "none"}</p>;
}
function Canvas({ Component }: { Component: any }) {
const [el, setEl] = useState<HTMLDivElement>();
const [root, setRoot] = useState<Root>();
const ContextBridge = useContextBridge();
useEffect(() => {
if (!el) return;
const root = createRoot(el);
setRoot(root);
return () => root.unmount();
}, [el]);
useEffect(() => {
if (!root) return;
root.render(<ContextBridge><Component/></ContextBridge>);
}, [root, Component]);
return <div ref={(el) => el && setEl(el)}></div>;
}
function App() {
const [number, setNumber] = useState(42);
return (
<NumberContext.Provider value={number}>
<button onClick={() => setNumber((n) => n + 1)}>increment</button>
<Number />
<Canvas Component={Number}></Canvas>
</NumberContext.Provider>
);
}
export 'useId' (imported as 'React') was not found in 'react'
when building app, webpack gives an error that there is no export useId in the module 'react'
here is bug in WebPack, from contributors material UI
in webpack issues 14814
in this comment trying gto fix them.
Hi, I'm using grafana.
And I'm trying to create grafana plugin, witch is basically react component with custom props.
When adding <Canvas/>
into JSX I get its-fine: useFiber must be called within a <FiberProvider />!
import { PanelProps } from '@grafana/data';
import { Canvas } from '@react-three/fiber';
import React, { useRef, useState } from 'react';
export const SimplePanel: React.FC<PanelProps> = ({ options, data, width, height }) => {
return (
<Canvas>
<h1>epic</h1>
</Canvas>
)
};
I really don't know what's wrong, nether can I find anything useful online, and I'm not sure if this issue belongs in this ripo or not I'm just looking for a step in right direction, cuz I've ran out of options.
I think that maybe webpack config is at fault.
So here is grafana default webpack config:
/*
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
*
* In order to extend the configuration follow the steps in .config/README.md
*/
import CopyWebpackPlugin from 'copy-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
import path from 'path';
import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
import { Configuration } from 'webpack';
import { getPackageJson, getPluginId, hasReadme, getEntries } from './utils';
import { SOURCE_DIR, DIST_DIR } from './constants';
const config = async (env): Promise<Configuration> => ({
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename],
},
},
context: path.join(process.cwd(), SOURCE_DIR),
devtool: env.production ? 'source-map' : 'eval-source-map',
entry: await getEntries(),
externals: [
'lodash',
'jquery',
'moment',
'slate',
'emotion',
'@emotion/react',
'@emotion/css',
'prismjs',
'slate-plain-serializer',
'@grafana/slate-react',
'react',
'react-dom',
'react-redux',
'redux',
'rxjs',
'react-router',
'react-router-dom',
'd3',
'angular',
'@grafana/ui',
'@grafana/runtime',
'@grafana/data',
// Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
({ request }, callback) => {
const prefix = 'grafana/';
const hasPrefix = (request) => request.indexOf(prefix) === 0;
const stripPrefix = (request) => request.substr(prefix.length);
if (hasPrefix(request)) {
return callback(undefined, stripPrefix(request));
}
callback();
},
],
mode: env.production ? 'production' : 'development',
module: {
rules: [
{
exclude: /(node_modules)/,
test: /\.[tj]sx?$/,
use: {
loader: 'swc-loader',
options: {
jsc: {
baseUrl: './src',
target: 'es2015',
loose: false,
parser: {
syntax: 'typescript',
tsx: true,
decorators: false,
dynamicImport: true,
},
},
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
exclude: /(node_modules)/,
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/resource',
generator: {
// Keep publicPath relative for host.com/grafana/ deployments
publicPath: `public/plugins/${getPluginId()}/img/`,
outputPath: 'img/',
filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
generator: {
// Keep publicPath relative for host.com/grafana/ deployments
publicPath: `public/plugins/${getPluginId()}/fonts`,
outputPath: 'fonts/',
filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
},
},
],
},
output: {
clean: {
keep: /gpx_.*/,
},
filename: '[name].js',
library: {
type: 'amd',
},
path: path.resolve(process.cwd(), DIST_DIR),
publicPath: '/',
},
plugins: [
new CopyWebpackPlugin({
patterns: [
// If src/README.md exists use it; otherwise the root README
// To `compiler.options.output`
{ from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
{ from: 'plugin.json', to: '.' },
{ from: '../LICENSE', to: '.' },
{ from: '../CHANGELOG.md', to: '.', force: true },
{ from: '**/*.json', to: '.' }, // TODO<Add an error for checking the basic structure of the repo>
{ from: '**/*.svg', to: '.', noErrorOnMissing: true }, // Optional
{ from: '**/*.png', to: '.', noErrorOnMissing: true }, // Optional
{ from: '**/*.html', to: '.', noErrorOnMissing: true }, // Optional
{ from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
{ from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
{ from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
],
}),
// Replace certain template-variables in the README and plugin.json
new ReplaceInFileWebpackPlugin([
{
dir: DIST_DIR,
files: ['plugin.json', 'README.md'],
rules: [
{
search: /\%VERSION\%/g,
replace: getPackageJson().version,
},
{
search: /\%TODAY\%/g,
replace: new Date().toISOString().substring(0, 10),
},
{
search: /\%PLUGIN_ID\%/g,
replace: getPluginId(),
},
],
},
]),
new ForkTsCheckerWebpackPlugin({
async: Boolean(env.development),
issue: {
include: [{ file: '**/*.{ts,tsx}' }],
},
typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
}),
new ESLintPlugin({
extensions: ['.ts', '.tsx'],
lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
}),
...(env.development ? [new LiveReloadPlugin()] : []),
],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
// handle resolving "rootDir" paths
modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
unsafeCache: true,
},
});
export default config;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.