I'm currently creating an npm package that will consist of a series of React components that are common to some applications I am maintaining.
My intention is to be able to import this components individually as needed, not all at once. So for instance if I have the components Accordion, DropDown and Widget, but I'm only using one of them, I'd like for only its code to be required.
My understanding is that I would need to be able to do something like
import Widget from 'components/Widget';
Instead of
import {Widget} from 'components';
But I can't get the first version to work. I have not published this package, so I'm using npm link to test it on another application. I'm not even sure what to Google to solve the problem myself, so I'd also appreciate links to relevant documentation on this matter.
Thanks.
So, of course a few minutes after asking my question I resolved the issue:
First, as Yacine Filali commented on my question above, I need to have individual files in order for this to work (this part I had already figured out).
However, I was incorrectly assuming that the root of my package was going to be set to whichever directory my entry file was in. So in package.json I had set
"main": "./lib/index.js"
Incorrectly assuming that the folder structure would be read from there. After altering my configuration to build everything into the root directory it worked perfectly.
(Of course, I'm now working on a better alternative, like generating a package.json for the lib folder)
In your component:
export default Widget
In your index:
export { default as Component } from './Component'
Related
I was wondering if I could customize what would ng generate for angular does. For example, if I want to generate a component, I would like the command to automatically edit my routes file and automatically add a new link based on what was written. Or for another example, I want to use a set of services to be included in my newly-generated component.
This solution would solve the problem of me going around, and importing each individual service to any new component that I am going to generate. So is there any way that I could modify the behavior of the ng generate command or even do some additional things on top of what it does?
I have an Android project (I'll update soon with the source once public) that has code in Kotlin.
When I try to import a class it shows on the auto-complete but then it does a full name reference instead of adding the reference to the class on the imports of the file. Also, when I try to do an import, there is no option to include the import to the class.
It's happened so far in two projects I've worked on. The first one had a mix of Java a Kotlin and I thought that may be the issue, however, the last one doesn't have any Java code.
The code is in the debug configuration. However, a file that is on the same package and folder as this one with the issue doesn't seem to have the same problem and imports work as expected.
Update after duplication suggestion
This was marked as a duplicate, but it's not for several reasons:
This one involves Kotlin and not Java
The reported problem was with project imports, this is a library (system) import
Tried the suggested solution and it doesn't solve this issue.
This one has a gif ^_^
Best what you can do it build new Empty Project and copy old classes and files on new project.
I have a question regarding Dependency Properties in WPF.
I am working on a project which uses controls from another package. I modified one of the controls by adding new dependency properties to it. However, when I try to access them in xaml that is in my project, I get error stating that there's no such property in my control. At the same time when I set the values of those properties in style for this control in a file that is located in the same package as the control, everything works. Also, the old dependency properties work fine.
I'm not sure what code to include to illustrate this, please give a hint.
Could anybody at least hint what is going on?
Thank you in advance.
The problem was that I didn't include in Build-Events of my first solution where the controls reside the path where to copy the respective dll so that the second solution could detect the changes.
We are starting a new project using angular2, typescript and gulp. For the time being our application will consist of two subprojects: a components library (which in the future might be spun off into a separate project) and the app using the component library.
The layouts of the project is going to be something along the lines:
/project_root
/component_library
/src
/library
/components
/services
... etc
/application
/src
/app_name
/components
/services
... etc
The components in application will be using components from the library (but not the other way round)
We would like to have clean (non relative) imports in the app components when importing stuff from the library (we want to avoid ugly imports of the sort '../../../component_library/src/library ...etc' plus, what's more important, we want to be able to move the library code to a separate project without the need to update imports.
There are two possible solutions I see (don't like any of them):
Add a gulp task that would watch the component library and on every change copy the file to node_modules in /project_root
Some sort of simlink? so that we can point /project_root/node_modules to /project_root/component_library/src?
I'm afraid the first solution might not work well with IDE autocomplete in the application (first gulp would need to do the compilation/copying then the IDE would need to pick up the change from node_modules - this looks like something that can be really slow)
The second solution feels hacky - it would need to be repeated by everyone who checks out the code from repo.
What would be the best solution here?
what's more important, we want to be able to move the library code to a separate project without the need to update imports.
Ship your component_library with source and add it as a node_module dependency. Then when someone pulls your code they can add a git remote to node_modules/component_library code and work on the two projects seemlessly.
This is the approach I took with ntypescript.
I'd like to make the popular LESS library LessHat available to my Brunch template but I want it done in a way that I can:
Take advantage of the Bower integration so I always have the latest
Rather than having the library transpiled to CSS I want the LESS to be made available to my own custom LESS files
Is this possible? A step too far? Obviously, it's not hard to put the static LESS file into my app/stylesheets directory but this makes the linking static and I don't get the Bower integration which would be pretty slick.
Just link to the lesshat-file in your less files. This way you can use lesshat-functions and still update lesshat with bower.
For example
#import 'bower_components/lesshat/build/lesshat-prefixed.less';
if you have styles.less in your project root folder.