Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need to include components from another project #453

Closed
Nosherwan opened this issue May 22, 2017 · 10 comments
Closed

Need to include components from another project #453

Nosherwan opened this issue May 22, 2017 · 10 comments
Labels

Comments

@Nosherwan
Copy link

we maintain our common components in another project, normally that is included via npm link in main projects.
I have created a project for react-styleguidist, now How can I include the common components in it.

@sapegin
Copy link
Member

sapegin commented May 22, 2017

Could you elaborate what exactly you want to achieve? Do you want to use these component or do you want to show them in the style guide?

@Nosherwan
Copy link
Author

Nosherwan commented May 22, 2017

I want to show them in the style guide that has its own project.
I suppose instead of giving a static location via config like so:

module.exports = {
	components: '../sws-ui-common/react/shared/components/**/*.js'
    }

I would like to provide the path via require or something along those lines:

module.exports = {
//this wont work but just to explain
	components: require('sws-ui-common/react/shared/components/**/*.js')
}

@sapegin
Copy link
Member

sapegin commented May 22, 2017

That’s what I would try to do.

@Nosherwan
Copy link
Author

Nosherwan commented May 22, 2017

so you are suggesting only the static location would work for components, and not dynamic?

@sapegin
Copy link
Member

sapegin commented May 22, 2017

I don‘t know what you mean by static and dynamic location. Something like this should work:

module.exports = {
	components: require.resolve('sws-ui-common').replace('index.js', '') + '/react/shared/components/**/*.js'
}

@Nosherwan
Copy link
Author

Tried that but I get the following error:
Error: Cannot find module 'sws-ui-common'
Seems like require.resolve && require are unable to find the npm linked module.

@sapegin
Copy link
Member

sapegin commented May 23, 2017

I don’t really understand why you use npm links, for your use case installing an npm package from Git seems more appropriate. If nothing works you’d probably have to hardcode a path.

@Nosherwan
Copy link
Author

No worries seems like hardcoding the path is the only solution for us at the moment. We do not publish our packages to npm, hence we use npm link to include them in other projects.

@sapegin
Copy link
Member

sapegin commented May 24, 2017

You can install an npm package from Git, that’s what we do ;-) npm link is supposed to be used for testing only.

@tuchk4
Copy link

tuchk4 commented Apr 2, 2019

I am working with lerna and one of the packages is styleguidist with its configs.
I need to include components from dependencies. Like this

{
  name: 'Inputs',
  components: [
    '@company/ui/src/components/TextInput/index.tsx',
    '@company/ui/src/components/NumberInput/index.tsx',
    '@company/ui/src/components/TextArea/index.tsx',
  ],
}

But this does not work. There are two solution to fix it

1. Use require resolve

{
  name: 'Inputs',
  components: [
      require.resolve('@company/ui/src/components/TextInput/index.tsx'),
      require.resolve('@company/ui/src/components/NumberInput/index.tsx'),
      require.resolve('@company/ui/src/components/NumberInput/index.tsx'),
  ],
}

2 Update via PR src/loaders/utils/getComponentFiles.js

+ function getResolvedFiles(components) {
+   const rest = [];
+   const resolved = [];
+   components.forEach(component => {
+     const path = require.resolve(component);
+     if (path) {
+       resolved.push(path);
+     } else {
+       rest.push(component);
+     }
+   });
+ 
+   return  [resolved, rest];
+ }

module.exports = function getComponentFiles(components, rootDir, ignore) {
  if (!components) {
    return [];
  }

+ const [resolved, rest] = getResolvedFiles(components);

  // Normalize components option into an Array
-  const componentGlobs = getComponentGlobs(components);
+  const componentGlobs = getComponentGlobs(rest);

  // Resolve list of components from globs
  const componentFiles = getFilesMatchingGlobs(componentGlobs, rootDir, ignore);

+  return [...resolved, ...componentFiles];
-  return componentFiles;
};

First solution is more simple but not so expected as the second.

Anyway developing with monorepo is very popular way now and thats why I suggest to add something like Using with monorepo section to the docs.

cc @sapegin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants