I have written an angular2 directive called ng2-clearfix. The typescript code itself is ready, it's tested and works just fine.
I now want to publish the directive on github so others can use it as well, i had a few questions while doing that:
How should i serve the file? Like should i provide ng2-clearfix.js file or should i just leave ng2-clearfix.ts and let the user compile typescript to javascript.
How should i manage dependancies for ng2-clearfix itself. I want to publish it on both npm and bower. i think using bower for my own dependency management will be a problem because the developer using ng2-clearfix may or may not be using bower.
Thanks for you time.
Also if you know a boilerplate for angular2 directive please let me know, that would make tasks easier.
Well, you can start by using this amazing tool generator-angular2-library
Iv'e used it recently for a library I wrote for Ionic2, and it really saved me some time.
It is a pretty simple Yeoman generator that produces you a skeleton for your library.
Then, after you finish organizing your app, you can publish it to npm.
Since Angular 2 uses Typescript, all the files should eventually be transpiled to javascript.
The basic idea is to keep all the source files in your repository, compile the files and publish them to npm under the right version. You should not commit the compiled files to the repository.
Your'e welcome to look at the library I wrote to see how things basically work: https://github.com/kadoshms/ionic2-autocomplete
Related
I have been looking for a way to mostly share some code between projects specifically for SPFX and fluent ui. We found 3 main ways to do that.
1.
Creating a component library is the way that seemed least complicated cause it uses the same infrastructure and do all building without the need to configure it.
But this adds some issues, we need to built and manually link the solution locally to make it work, this will also work if we put in a repo. so this is mitigated.
The second is that implicitly this will also require the fluent ui and react. Plus having to place it inside a SPFX component library project.
2.
I saw some promise using paths in ts and this works fine while using the ts compiler. It will go to the folder that your proj is referring and build it at calling time. which is great. But it did not work in SPFX.
3.
Another way was to have a post install to sync the folders which seems easy enough but I wonder how practical this is plus how people are doing it, if they are, how.
All I wanted to figure out now is a way to take my component code and share as if they were in a folder of my src or a simple extension of the code. No need to have extra dependencies or build steps, just the code that can be used as a ts/tsx file. ex:
shared lib:
//assuming I have react and fluentui already installed for the project.
import button from 'fluentui';
export const fancyCustomButtom = (props) => {
return (<Button text="Standard" />);
};
src project folder:
import {fancyCustomButtom} from 'shared-lib'
It is fine if it needs to build the files before we can use it but can we do it at build time or when the package is installed? also wouldn't it increase my bundle size by making both module dependent on things already available (react, fluentui)?
Given the way Microsoft have architected the loading of bundles in SharePoint and Teams - I believe an SPFX component library is the best way to share code between different solutions, particularly if you are looking to minimise bundle size...
Imagine you have a library for something re-usable: a form, a set of standard branded components - something of that nature. You could put your shared code in repos and add references to it - either by publishing your own repo publicly or using the npm install git+https://yourUrl syntax; but what effectively happens there is that your code is pulled down in to node_modules for each project, and any referenced module code is included in your bundles. If you have two, three, four or more webparts on the same page - using those same libraries, you're multiplying how many times that code is included on the page.
If you follow Microsoft's guide on setting up a component library project however, your npm link commands allow your types to be recognised in consuming projects without needing to actually include the bundled distribution code. You can deploy your library code once to the App Catalog, and if it's referenced in other solutions -- it's loaded on pages as needed: once.
I have found the development experience to be quite flaky at times, but it does work. When I run gulp clean on my library code, or come back to it after some time, I sometimes find that I need to run npm link and npm link my-project-name again as per the instructions in the above tutorial. Whenever you run gulp build on your library, you should also rebuild the project that consumes the library, either by using gulp build / bundle or by saving a file (if you're running gulp serve). This process works well for developing, and once it comes time to deploy, all you need to do is add a named reference to your library inside package.json and then deploy both .sppkg files to your App Catalog.
In terms of your last question re: bundle size - react is not actually included in the dependencies for an SPFX library project, but you will find it's available to use. When you build your library, if you take a look in the generated javascript in your dist folder, you will see it's listed as one of the dependencies for the webpacked content along with react-dom and ControlStrings. It's on line 1.
office-ui-fabric-react is included as a devDependency thanks to the #microsoft/sp-webpart-workbench package that gets scaffolded with all SPFX projects - and if you check your library's dist javascript, you will see that included components are being webpacked and included in your bundle. I'm not entirely sure if when you pull this code in to your consuming project, whether webpack then tree-shakes to de-duplicate and ensures only necessary code is included: I don't know. Someone else may be able to illuminate us there or provide a more accurate explanation of what's going on... I will update this response if anyone comments to let me know.
And finally, this is more of a personal way of working, but it may be worth consideration:
When developing a library, I sometimes reference it in other projects via a local npm install ../filepath command. This ensures that when I install the library as described, the consuming project installs any necessary dependencies. I'm able to tweak both projects if I need o. When it comes time to deploy, I commit my changes to both projects, deploy my library code to the App Catalog, and then npm uninstall the library from the consuming project and add a reference as described in the above tutorial. When I deploy projects that use my library, they just work.
I recently developed a library that uses pnpjs, in particular the #pnp/sp library that is used to talk to SharePoint. If you look at the Getting Started guide for that library, they expect you to pass a reference to your Application Customizer or Web Part context during setup, or explicitly set things up using a base URL and so forth - and of course, a library doesn't really have a page context of any sort - the whole point of this code is that it's reusable. So that poses a challenge. My solution was to do the setup in the consuming web part(s) and ensure that they pass a reference to the sp object (which is of type SPRest) to any code or components that exist in my library. My library has peerDependencies on those pnp libraries so that the code isn't duplicated in consuming projects. Sometimes you have to think about what your library needs to include in its bundle and what you expect consuming solutions to already have, and maybe find ways to ensure things aren't included that aren't needed.
For example, in the scenario you talk about, you may want to ensure fluentui or office-ui-fabric-react are only devDependencies or peerDependencies for your library. As long as your library and the project(s) consuming your library both use the right version(s) you shouldn't have any trouble, and you can document any pre-requisites with your library documentation. You can check which versions of these libraries are installed per the SPFX version you are currently using ie. SPFX v1.11 or v1.12 etc. Just run npm ls <packagename> to get a breakdown, or check your package.json file.
Hey guys since I am learning angular js I am confused about angular js installation.
1) In some tutorials people have used angular js library just like we import jquery in HTML file.for e.g.
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
2) and on the other hand npm is used to install angular which creates scaffolding of angular application.
So what is difference between these two methods?
Which one is best method?
It depends on your needs.
Installing angularjs with npm gives you the possibility to minify and concat all your javascript files in only one for exemple.
It allows you for example if you use babel to transpile your javascript es6 code into classic javascript file.
Another thing is that in some IDE (advanced code editors) like webstorm, you have some helpfull funcyions with for exemple automplete on the node modules or on the functions.
With webpack you can use the import statement to separate all your javascript files and combine them before.
In fact, if you have to create a big project with a lot of different files, you want better performances, you want to minify and concat all your files into a single file, use npm with gulp/webpack.
If you want to create a simple project for yourself and you don't want to take a lot of time to learn/configure all of that, use simple CDN.
hopes it helps you.
I want to share common JS code between different JS projects in a very easy way.
I thought about creating a Bower component (see: LINK) or a private NPM component (see: LINK).
However, I want it to be used in a very IDE friendly way. A such, that when we update the Common code (project) we don't need to first publish the changed Common code.
Let me explain what I mean by how we do this in Java with Eclipse (we use mostly IntelliJ with Python and React JS currently): In a Java project we include Common Java code through a maven dependency, and also open the Common Java code as a project in Eclipse. Eclipse is then smart enough to see that it will include a direct link to the Common code project, instead of including the Common code as jar such that you don't need to first deploy the Common code project to the private repo when making changes to it.
We aren't experts in JS code yet, so how can we realise this same kind of friendly IDE usage with JS ?
I solved it by using npm-link:
1) Used npm-link as explained here: LINK
2) Solved the babel problem as explained here: LINK
In my case, my babel config looks like:
options: {
presets: ['babel-preset-es2015', 'babel-preset-react'].map(require.resolve),
plugins: ['babel-plugin-transform-react-jsx-img-import'].map(require.resolve)
}
Works pretty wel. I looked at npm local-dependencies, but it didn't work with the current npm version. Currently it does as they fix it. But I always have to run "npm start" just like other sync npm modules. Neither do I want to use local dependencies as several developers put the shared code at different places, which make it fragil.
I haven't started a new web project for years, so the latest technologies went past me mostly unnoticed...
Now I need to create a little dynamic webpage, for which I mostly need jQuery and maybe one or two plugins. One of them requires a library called RequireJS, which I then had a look at and immediately fell in love with. Javascript just looked so much nicer suddenly! :-)
But... I had also found npm and really like the way of installing new packages. "npm install --save jquery" is just so nice and simple. Now, npm install tons of files in a node_modules sub-directory, which I don't really like. I only need one or two files per library!
So: is there a nicer way than npm to handle packages (i.e. only download the necessary files)? Especially one that works well with RequireJS? Or do I have to set up some other tools (found something called "grunt")? Can someone please give me a working example?
Thanks!
I was looking at Differential's meteor-boilerplate app and noticed that they do not use a bootstrap package and also saw a directory/file in the client directory that is related - client/compatibility/bootstrap.js
I was wondering if anyone had an explanation for why/when you'd want to avoid using a package like twbs:bootstrap and when you'd need to create a compatibility file.
I would say that it's the lazy path to include external libraries in a Meteor application.
You basically have two ways to achieve this include:
The road of glory. Create a package (meteor create --package), clone the source inside it, then edit and "Meteorize" the source (declare package-scoped variables instead of window-scoped, ...). You can then publish this package on Atmosphere so that others can benefit of it.
Copy/paste everything in a client/compatibility folder.
As explained in the docs, everything in this folder is not embraced with an IIFE and is executed before the other code files.
When you have the time to, be brave and take the heroes path.