-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
Comments
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? |
I want to show them in the style guide that has its own project. 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')
} |
That’s what I would try to do. |
so you are suggesting only the static location would work for components, and not dynamic? |
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'
} |
Tried that but I get the following error: |
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. |
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. |
You can install an npm package from Git, that’s what we do ;-) |
I am working with lerna and one of the packages is styleguidist with its configs. {
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 cc @sapegin |
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.
The text was updated successfully, but these errors were encountered: