We need to create a pure CSS library that can be used by our Angular, React, Vue and WC applications and libraries.
Something that can be accessed in a way like #myorg/styles.
It seems related to this ticket #54 but it's already Closed with a promise that something will be done to address it.
However, I still can't see a proper way (via plugin?) to do this.
I'm curious how others create a shareable (framework-agnostic) styles library.
Simply generate a library via nx generate library and reference that library in your apps. docs
Generator will generate a complete library template (ts + css) but you can clean generated code with your needs.
Your question is interesting. However, I think it may be impossible because we know that Angular (example) are javascript-base with layers to encapsulate:
App -> Modules -> Components -> TS + style + html
So it's hard to make the impact from a library directly to Component style.
A solution I can think of is instead of a library so we can create a folder called styles to store scss/sass files and import them separately to component files or angular.json. It's so basic and not cool, but it should work.
Or if I were you, I would probably want to push these style files to a CDN storage (private/public) and add the <link rel="stylesheet" /> to index.html.
Hope this help particularly!
Related
I am building a monorepo for a suite of React apps, and common library code. One of the packages would be a component library.
packages
app1
app2
common-ui
alert
button
I'm pretty new to the whole React/node ecosystem.
I've looked at a lot of actual UI library examples - react-bootstrap, material-design-components-react, etc.
It seems I would want to have each component in the common-ui lib to be distributed as single files, so that they can be cherry-picked when imported into a consuming app.
react-bootsrap does this by using babel to build the "lib". They build into a browser distributable, a commonjs lib, and an ES lib.
material-design-components-react does this by having their component lib itself by a lerna monorepo, with each component having its own package.json, and I believe they use webpack to build each component individually.
So my first question is,
Is a structure like material-design-components-react in my common-ui folder - kind of a monorepo within a monorepo possible?
Or would I have to restructure:
packages
app1
app2
alert
button
My second question is,
Which design is recommended by the community for a component library within a major monorepo? This must be a common structure developers have to solve when they have many client apps with common libraries. A package per common-ui component seems like a lot of overhead, but of course they have scripts to help out.
Is a structure like material-design-components-react in my common-ui
folder - kind of a monorepo within a monorepo possible?
Yes it's possible. But keep in mind, you and those libraries have very different requirements. You can think of your monorepo as small projects developed in same company., which are depending on similar 3rd party libraries and they follow same linting, testing etc.
Which design is recommended by the community for a component library
within a major monorepo? This must be a common structure developers
have to solve when they have many client apps with common libraries. A
package per common-ui component seems like a lot of overhead, but of
course they have scripts to help out.
First structure with 3 packages is most common way to start your repository/project.
In your case, I wouldn't recommend to divide your ux-library into single files. Your apps will likely use most of your ux-library and probably you won't have as much components as material or bootstrap has. Moreover, if you'd ever reach that point in your library, you can separate them later. For reference you can also check how lodash is publishing each of their functions. It's not different than your case (assuming you won't publish any fonts/images etc.).
I have a fundamental question related to React.
For example, i want to use ths third-party libray: https://metroui.org.ua/stepper.html#_stepper_events (example component, that has special callbacks) with react.
But this library doesnt have react bindings. So, i want to find out the right way to use it.
Should i use it with JQuery? With library, that shipped with this framework? (Metro.js in this way https://metroui.org.ua/events.html) Should i use this library at all?
Thank you in advance!
I've been developing web app using react or angular but I'm confused why people would use library like react-bootstrap (https://react-bootstrap.github.io/introduction.html) or Angular-bootstrap? Because when I create I just have to load the css framework using link tag with its corresponding js lib, then in reactjs side, I just have to put the classes needed for a component. Isn't that sounds easier?
Thanks,
It has to do with the Javascript portion of Bootstrap. The CSS will work just fine with a link tag.
But React and Angular are Javascript libraries which have a lot under the hood for manipulating the DOM. If you also use something like Bootstrap or jQuery to manipulate the DOM, it probably won't play well with React or Angular since they're trying to do similar things in very different ways maybe at the same time. So DOM-related Javascript libraries need to be rewritten so they play nicely with React/Angular.
From the react-bootstrap docs:
we don't ship with any included css
All they deal with is the JS.
When you chose to work with reactjs you chose a library that updates your DOM in a cleaver and sophisticate way.
It has the virtual DOM and bunch of algorithms (like the Diffing algorithm) to determine when and how to update the DOM in the most fast and efficient and performant way.
When you combine this with another library that updates the DOM, you basically interrupt those algorithms to do their job.
Beside performance aspects, you are working against the pattern of react, you break the "component pattern".
React-Bootstrap is here to help you maintain your component pattern with their components. you just need to include the css and other resource files.
Their components doesn't do anything beside rendering HTML with proper class names that correspond to the classes that in the bootstrap's css files.
They do that in the same way all your other components do it, via props.
This way you can have a bootstrap components that play nice with your other components in a native way without breaking the pattern.
Yeah, it's easier to dump some css and js files and things just works, but it's harder to maintain, debug and scale.
I want to move my existed web app to mobile platforms. How should I transfer my existed css file to React Native css?
Is there any way to do this directly in the app logic, or I should use builders like webpack, if it so, which plugin do I need to use? Or maybe there is some packages for IDEs like Webstorm or Atom?
Any tip will be helpful, just not to do this manually.
There is nothing built into React Native to turn CSS into RN StyleSheets. React Native has a different set of attributes that is supports and some of them behave slightly different from their counterparts in CSS. That said I have a few suggestions for paths forward:
Rewrite your css as StyleSheets as Sintylapse suggested covered here
Use a third party transpiler like this one to convert yous css to React Native StyleSheets.
Write all your styles inline with no stylesheets.
I would recommend the first option if you intend to work on this app or React Native in general for a while. Though it may be a bit rough to learn the syntax and how to write your styles, in the long run you will become more proficient than you would with the other methods. If you are looking for a good place to start with stylesheets this blog post looks promising. The transpiler could work but since it is a third party project I wouldn't be surprised if you ran into a bug and had to comb through generated code to find what is wrong. Writing styles inline can help prototype but it will not make it easy to maintain your app in the long run.
Sorry this will obviously be a beginner question. I have Angular up and running fine within a Grails application. Now I have defined a directive that is effectively a control needed. This directive uses 'templateUrl' - that also works fine.
However, this is the simple part that I just don't know. Where would I put includes to javascript libraries that are only needed by the directive? That is, statements like:
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
I have put them in the main page for now, but that doesn't seem quite 'right'. These are dependencies of the directive, not of the page. From a maintenance perspective, if that directive were ever removed due to changes, how would anyone know to remove the other links?
Note: my directive is already in an open statement - if that matters.
This is a larger question of dependency management. There really are 3 routes for doing this:
Include it in the main index.html (like you did) and declare it as a dependency in your docs. Feel ugly? Sure. But it is how a lot of stuff is done.
Use requirejs http://requirejs.org It is a module loader, and so at least the code itself can explicitly declare its dependencies.
Use browserify http://browserify.org It is also a module loader, but following UMD/CommonJS, exactly like in node.
I started with #1, then #2 for a while, but recently shifted to #3. The files are cleaner, and using npm makes managing the dependencies far easier.
Loading all external resources inside index.html is the common approach (SPA load all its resources once), but its not a must.
Inorder to achieve your goal you need to use external tool, we use RequireJS (Browserify is good as well) this way you can control the sources you load into the page.
Checkout this:
RequireJS official site
Using RequireJS in Angular Applications