I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
Related
I'm currently working on an application using preact, tailwindcss and vite. Unfortunately, importing svgs seems to be a bit problematic.
There is a separate repository that only contains the svg resources.
My original plan was to just import them as components as I was used to do it in classic react with webpack applications using SVGR and the following syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
This won't work for (at least) two reasons. One being preact the other one being the lack of SVGR.
I then proceeded to give vite-plugin-svgr a try by importing it in my vite.config.js.
plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],
It kinda works using the following import syntax:
import Search from 'assets/icons/search-lg.svg?component';
Unfortunately this raises the following error which I couldn't manage to work around besides ignoring it which is not really an option:
TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations
The alternate plan would now be to create a wrapper component that just imports the svg from the given path and create a component from it myself. This would also simplify styling it with tailwind.
Unfortunately I fail to import the file in a way I can wrap it with <svg> tags. Using <img> is not really an option because I need to be able to manipulate the svg.
So, does anybody have an idea how to either
correctly use the component import in my setup
create a preact component that imports an svg from a file and still is customizable
Thanks in advance!
I finally got it to work by using vite-plugin-svgr. In the end adding /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts made the compiler happy.
I can now use the good 'ol syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
Thanks to #user-28 for pointing me in the right direction!
I've encountered a very unusual issue while creating a React UI library using Mui-5.
In my UI library, I'm creating modified Mui components both at the theme level and some with extra functionality like Button with loader, but while using it, ThemeProvider is not working as expected.
I've several paths to import the components-
Importing everything from root, e.g import { Button, Alert, DefaultTheme } from 'ui-lib';
Importing components from specific dir, e.g import { Button } from 'ui-lib/core'; or import { DefaultTheme } from 'ui-lib';
But when I try to wrap DefaultTheme with components imported directly from #mui/material or ui-lib/core, styles are not being applied.
I'm unable to check where to look for the issue, as everything is working fine in the storybook and the same codes are working fine when copied and used instead of used from the library.
Some scenarios I could compile are -
WORKING -
Importing the components from #mui/material and themeProvider from ./theme/skuadDefaultTheme(copied same theme config from lib in local-app to check)
Importing everything only from ui-lib (but while trying to console theme values when using DefaultTheme, no extra colors are being consoled, which were added in DefaultTheme under the library)
NOT-WORKING -
Importing the components from ui-lib/core and themeProvider from ui-lib
Importing the components from ui-lib/core and themeProvider from ./theme/skuadDefaultTheme
Importing the components from #mui/material and themeProvider from ui-lib
I'm unable to add any code for reference as I don't even know where to check and what to debug, adding a few things that might help-
GitHub repo - https://github.com/rishavpandey43/ui-library
GitHub online codespace - https://rishavpandey43-ui-library-4v9w7gx6hjw9v.github.dev/
Steps to perform in the repo-
Once you run yarn install, run yarn start. It'll do all the linking and will run other scripts and the example-app present in the root level will start.
Open example-app/src/App.tsx and you can find a few commented lines which can be uncommented to check all possible scenarios.
I'm adding some more details which might help -
When I tried to console theme variables to see if I've overridden theme-config from the library, I couldn't see extra colors added by me, but I would like to also point even though when styles were being applied when everything was imported from root dir.
Also, I tried to style my components with styled API, and they're not working in some cases too.
When copying and using the exact same codes from the library in any normal react application, everything is working as expected.
Thanks in advance.
I'm looking to optimize my React folder structure.
It looks like this:
- components
- Header
- Header.tsx
- Header.styles.ts
- index.ts
The index.ts is just there to allow me to import the Header component with import { Header} from "components/Header. This works because I'm using babel-plugin-module-resolver. Now, since my folder name is always the same as the main file name inside my components folder, I would like to be able to import the header with import { Header } from "components" and have a Babel plugin resolve this to import { Header } from "components/Header/Header". This would mean I could remove the index.ts
Which Babel plugin can do this?
I'm already using babel-plugin-module-resolver to resolve the components folder. My problem is that i'm also using TypeScript so how do I tell the TypeScript compiler that this module is being resolved like this?
Please help me out. Thanks!
You should be able to just have your index.ts in your components take care of that normally. I don't think that this has anything to do with babel-plugin-module-resolver, it's just how index.ts/js files work in general. https://alligator.io/react/index-js-public-interfaces/
You should be able to get what you are looking for by doing the following in your index.ts file in your component directory:
You import your Header component and then directly export it.
import {Header} from './Header/Header'
export Header
Or you might be able to do a symmetrical export depending on your setup:
export {Header} from './Header/Header'
I'm trying to get Icons working with Gatsby but it they don't seem to be showing in the production build.
I am importing the icons like this
import {
initializeIcons
} from "office-ui-fabric-react"
and calling the function like this
initializeIcons()
which is all in my index.js page file. This works fine when running gatsby develop however when i run gatsby build && gatsby serve the icons show up like this.
However, when I look inside Chrome dev tools, i can see the icon fonts being downloaded.
so i am assuming it is something to do with the static render of gatsby. I started with this template https://github.com/microsoft/gatsby-starter-uifabric
Any help is appreciated.
I had the same issue. After trying a bunch of work-arounds, I ended up using office-ui-fabric-core instead.
Install the library:
npm i office-ui-fabric-core
Import the ui-fabric-core css
import "office-ui-fabric-core/dist/css/fabric.css";
example icon component:
import React from "react";
const MyIcon = ({iconName}) => <i className={`ms-Icon ms-Icon--${iconName}`} aria-hidden="true"></i>
export default MyIcon;
Example usage:
<MyIcon iconName="People" />
The answer was to use the initializeIcons(undefined, { disableWarnings: true }) method outside of the App class code, just above it will do fine.
To quote the wiki article on the use of this method
If your code is running in an environment where icons may have already been registered, you may need to disable the warnings. (By default, registering the same icon twice will ignore subsequent registrations.) To initialize icons and avoid duplication warnings, pass options into initializeIcons:
https://github.com/microsoft/fluentui/wiki/using-icons
I've installed Styled Components into my Create React App, and everything works fine, but by default, it looks as though the class name it appends to the element isn't based off of the styled component name (ie. MyButton should create an element with the class MyButton-134as23f).
In the Styled Components documentation, it says to install the babel-plugin-styled-components, and then configure the .babelrc file, however, from what I understand, we don't have access to that file until we eject from the app.
So how can I debug styled components while I am developing an app within Create React App?
I was able to find an answer to this:
Because Create React App is a zero-config application, the only way to add anything to the .babelrc file is to eject from React.
Obviously, I wanted to keep all of my tooling, and came across babel-plugin-macro. It's essentially a way for users to run libraries at compile time, without having to configure their Babel file beforehand.
So after installing it to my devDependencies, I then changed the import path to import styled from 'styled-components/macro, and all of the Babel plugin features that you would normally need to eject for came standard with Styled Components.
Let me know if you have any questions or trouble with my answer.
Hope this helps!