Codestin Search App

jjjjonathan · 2024-12-28T05:39:44Z

This adds a plugin for Metro, the JavaScript bundler for React Native.

pkg-pr-new · 2024-12-28T05:40:17Z

npm i https://pkg.pr.new/knip@895

commit: 86840dc

jjjjonathan · 2024-12-28T05:44:04Z

+
+const title = 'Metro';
+
+const enablers = [/^metro(-.*)?$/, 'react-native'];


Not sure if this is the best way to handle this, but typically Metro is not in the project's package.json, as it's a dependency of React Native

In that case, let's just use only react-native? Is that ever not listed?

@webpro It's definitely possible to have a project without react-native listed. Metro can also bundle for web, although it'd be pretty rare to use it for exclusively that purpose over other web bundlers. Or the project could be a custom dev server that uses Metro's bundling API. Again, a rare use case, but possible.

We can/should obviously leave some metro specific enabler(s) here, but this regex matches anything that starts with metro which is too loose?

True, I'll remove the regex in favor of 'metro'.

webpro

Thanks Jonathan, this is great!

The reason I held off introducing this plugin before is that it's not trivial to properly support Metro's module resolution, i.e. support the various *.{android,ios,web}.ts etc. files. It basically means added complexity and creating the graph for each target separately (also see #126 if you haven't already).

How are you handling this in your project(s)?

There's a similar situation with the Nuxt plugin, which might lead to (lots of) false positives/confusion. We could add a note for this plugin too, should probably stand out more (not necessarily in this PR though).

I think overall this is definitely worth merging, I just like to also make sure users understand what "works with RN/Metro" means and how they should reason/go about it.

webpro · 2025-01-04T06:29:41Z

+
+const title = 'Metro';
+
+const enablers = [/^metro(-.*)?$/, 'react-native'];


In that case, let's just use only react-native? Is that ever not listed?

jjjjonathan · 2025-01-04T18:00:34Z

@webpro Thanks for the review! I have looked through #126 in the past and I totally respect that it would add a lot of complexity to Knip. I don't have a lot of platform-specific extensions in my projects, but I have experimented with a little script that simply finds files with platform-specific extensions, and if they have a matching file without a platform-specific extension, it adds the file to my knip.config.ts as an entry point.

For me personally, there's a great benefit to a simple plugin to add entry points and dependencies even without the platform-specific extensions support.

If a note about RN module resolution/platform-specific extensions is added to the docs, I'd suggest adding it for the Expo plugin too. Metro is a little more technical and new RN users will likely encounter Expo first (it's the recommended way to get started with RN from the RN docs).

webpro · 2025-01-04T19:02:23Z

I don't have a lot of platform-specific extensions in my projects, but I have experimented with a little script that simply finds files with platform-specific extensions, and if they have a matching file without a platform-specific extension, it adds the file to my knip.config.ts as an entry point.

For me personally, there's a great benefit to a simple plugin to add entry points and dependencies even without the platform-specific extensions support.

That's cool but if we market Knip as "supports React Native" I'd expect users in RN projects to run Knip and then face a ton of unused (platform-specific) files reported. For them I need a clear path out (tbh actually it's already too late for a good first impression then, but that's the risk I might be willing to take).

jjjjonathan · 2025-01-05T20:25:05Z

@webpro I understand; it definitely makes sense from a "good first impression" perspective. Let me know if I can help move things along in this PR or another!

webpro · 2025-01-05T20:32:25Z

Yeah not that Knip is perfect by any means, but I can easily imagine situations where many false positives might be overwhelming for new users. Was thinking we could add a note to the plugin page and whip up a page dedicated to RN, perhaps a bit like https://knip.dev/features/integrated-monorepos. Maybe configuration hints directly in the CLI output.

If you could make this PR green then we can wrap this up soon I guess :)

webpro · 2025-01-05T20:38:43Z

Thanks Jonathan! Planning to prepare a release in the coming days.

webpro · 2025-01-06T21:22:28Z

Tried a few projects and using those default production entry patterns work pretty well:

knip/packages/knip/src/plugins/metro/index.ts

Lines 23 to 41 in 093dcca

    
           const DEFAULT_PLATFORMS = ['ios', 'android', 'windows', 'web']; 
        
           const PLATFORMS = [...DEFAULT_PLATFORMS, 'native', 'default']; 
        
           const DEFAULT_EXTENSIONS = ['js', 'jsx', 'json', 'ts', 'tsx']; 
        
           const production = [`src/**/*.{${PLATFORMS.join(',')}}.{${DEFAULT_EXTENSIONS.join(',')}}`]; 
        
           const resolveEntryPaths: ResolveEntryPaths<MetroConfig> = async config => { 
        
             const platformEntryPatterns = compact(PLATFORMS.concat(config.resolver?.platforms ?? [])); 
        
             const sourceExts = config.resolver?.sourceExts ?? DEFAULT_EXTENSIONS; 
        
             const pattern = `src/**/*.{${platformEntryPatterns.join(',')}}.{${sourceExts.join(',')}}`; 
        
             if (!config.projectRoot) return [toProductionEntry(pattern)]; 
        
             const entryFilePattern = 'index.{js,jsx,ts,tsx}'; 
        
             const entryFilePath = join(config.projectRoot, entryFilePattern); 
        
             const entryFilePaths = join(config.projectRoot, pattern); 
        
             return [toProductionEntry(entryFilePath), toProductionEntry(entryFilePaths)]; 
        
           };

E.g. in https://github.com/pass-culture/pass-culture-app-native I didn't need to change the defaults, in others there's only a small number of false positives. With the simple plugin docs hopefully it's pretty clear what's going on:

https://4f7938f0.knip.pages.dev/reference/plugins/metro

If you'd like to try it out install with something like npm i -D https://pkg.pr.new/knip@093dcca

In case you have any concerns or feedback I'd love to hear about it :)

webpro · 2025-01-06T21:24:58Z

E.g. in https://github.com/Expensify/App this override seems to work well:

{
  "metro": {
    "entry": ["src/**/*.{ios,android,windows,web,native,default,desktop,website}.{js,jsx,json,ts,tsx}"],
  },
}

webpro · 2025-01-09T06:53:05Z

🚀 This pull request is included in v5.42.0. See Release 5.42.0 for release notes.

Using Knip in a commercial project? Please consider becoming a sponsor.

metro plugin

c9d6de9

jjjjonathan commented Dec 28, 2024

View reviewed changes

jjjjonathan mentioned this pull request Jan 2, 2025

Add expo plugin #879

Merged

jerone reviewed Jan 2, 2025

View reviewed changes

Comment thread packages/knip/src/plugins/metro/index.ts Outdated

remove mjs from list of valid metro config exts

ed436d7

webpro reviewed Jan 4, 2025

View reviewed changes

remove metro regex enabler in favor of string

61aee8e

bun format

86840dc

webpro merged commit b106a5f into webpro-nl:main Jan 5, 2025


		const title = 'Metro';

		const enablers = [/^metro(-.*)?$/, 'react-native'];

Uh oh!

Conversation

jjjjonathan commented Dec 28, 2024

Uh oh!

pkg-pr-new Bot commented Dec 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jjjjonathan Dec 28, 2024

Choose a reason for hiding this comment

Uh oh!

webpro Jan 4, 2025

Choose a reason for hiding this comment

Uh oh!

jjjjonathan Jan 4, 2025

Choose a reason for hiding this comment

Uh oh!

webpro Jan 4, 2025

Choose a reason for hiding this comment

Uh oh!

jjjjonathan Jan 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

webpro left a comment

Choose a reason for hiding this comment

Uh oh!

webpro Jan 4, 2025

Choose a reason for hiding this comment

Uh oh!

jjjjonathan commented Jan 4, 2025

Uh oh!

webpro commented Jan 4, 2025

Uh oh!

jjjjonathan commented Jan 5, 2025

Uh oh!

webpro commented Jan 5, 2025

Uh oh!

webpro commented Jan 5, 2025

Uh oh!

webpro commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webpro commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webpro commented Jan 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pkg-pr-new Bot commented Dec 28, 2024 •

edited

Loading

webpro commented Jan 6, 2025 •

edited

Loading

webpro commented Jan 6, 2025 •

edited

Loading