We Keep Coding

How to use a capacitor plugin meant to be imported in a vanilla js app

I'm currently pulling hairs trying to figure out how to go about this.
So, I'm working in a vanilla JS environment with no webpack setup served with capacitor and want to use this capacitor-plugin: https://github.com/CodetrixStudio/CapacitorGoogleAuth
However, to use this plugin I have to import the package into my client code.
Here's what I've tried:
Unpkg type="module": however browser support in mobile isn't that great. And this app will be served to a ton of users
Using browserify + esmify to bundle the plugins code into something I could import with a <script> tag into my index.html. Didn't work
My last thought is to setup webpack to bundle everything for me, similar to the browserify approach and import that. However before I go through with all of that I wanted to reach out here to see if you guys had any other ideas.
Is there a way to access this plugin from window maybe?

so I figured out the way to go about this by following this article: https://medium.com/#SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d
Basically you have a www/js directory (vanilla js), and a src directory (ES6/import code goes). You then configure webpack to output in your www/js/ directory.
Note: Any variable you want accessible to your vanilla js code must be explicitly stored in the window object.
Example
./src/toBeWebpacked.js
import Module from "your-module"
window.doSomething = () => Module.doSomething()
./www/js/vanilla.js
const useModuleCode = () => {
// use code from webpacked ES6 JavaScript here
return window.doSomething();
}

CKEditor5, how to test proof of concept for simple plugin?

I have an idea for a plugin for CKEditor5 but configuring everything seems to be overwhelming and complicated. So pretty much don't know how to start. Is there any way how I could test if my idea for a plugin is worth going deeper into this project? Some step by step guide will be helpful.

There are at least 2 ways, which I found. You can write some simple proof of concept plugins in manual test for CKEditor5 or extend one of CKEditor5's builds.
Creating new plugin inside manual test:
CKEditor5 code is compiled and served by pre-configured webpack, so you can only worry about writing proper plugin's code.
What's more you can use watch mode which will in real time reflect changes in your simple plugin. Webpack also rebuild page with test which contains your simple plugin.
Step by step guide:
Follow with guide to setup environment here
npm install -g yarn mgit2
git clone https://github.com/ckeditor/ckeditor5.git
cd ckeditor5
mgit sync
yarn install
Open file with test: ckeditor5/packages/ckeditor5-core/tests/manual/article.js. You can write plugin in this file
Run test in watch mode to have builded editor available in your browsers: yarn run manual -sw --files=core/manual/article.js
Open browser on page: http://localhost:8125
Write simple plugins in "article" test. You can add those entries to see if its works:
Add this part, before editor creation.
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
class SimplePlugin extends Plugin {
init() {
console.log( 'Hello world' );
}
}
And modify list of included plugins in configuration
from: plugins: [ ArticlePluginSet ],, to: plugins: [ ArticlePluginSet, SimplePlugin ],
Refresh page with test and you should see in the console text: Hello world. Now you can implement new changes to your Simple Plugin and see result on page.
Creating new plugin inside CKEditor5 build:
Alternative solution is to use one of CKEditor5 builds and extend it with your own simple plugin.
Step by step guide:
Clone build, e.g: git clone https://github.com/ckeditor/ckeditor5-build-classic.git
Install dependencies: npm install
You can add plugin in src/ckeditor.js in a similar way as it was done in previous guide.
Add this part, before editor creation.
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
class SimplePlugin extends Plugin {
init() {
console.log( 'Hello world' );
}
}
And modify list of included plugins in configuration. To plugins array add SimplePlugin,
Now build your new package with npm run build
Run some http server in your project directory and run samples/index.html. You should see Hello world in browser's console.

Adding a script to an Angular Library

I am trying to export some components of my Angular 6 application into a library. Unfortunately, I need to use a WebToolkit to connect to a proprietary service build by other people, which is only available as a pure javascript file. This file, in turn also needs jQuery and require.js.
Without libraries, I have solved this by adding these js files to the .angular-cli.json under "scripts"
{
...,
scripts: [
"node_modules/jquery/dist/jquery.js",
"node_modules/require/require.js",
"path/to/my/magic/library.js"
],
...
}
Now building my angular library, I would like to have those scripts built into my own library code, such that it can still be used by my customers in the simple manner of performing just one npm-install and importing it in their .module.ts file.
Is that somehow possible with the Angular-CLI 6? Or do you have other suggestions how I can achieve a simple installation of my library?

Provide the reference of your external JS in your angular. json file of main angular project in a script tag and provide the path of your package from your libraries node_modules folder like this. So now you have created the NPM package from your library and you are going to use it in different project
**Add externaljs file**
**Step 1**
Take a file in the assets folder and set any name. Like as custom.js
function getToday() {
alert(new Date().toLocaleDateString());
}
function greetings(name) {
alert(`wellcome ${name}`);
}
**Step 2**
Now add the customjs file reference in the angular.json scripts section array list. Like as below
"src/assets/custom.js"
**Step 3**
Now add the functions reference in a component file. I am using the app component.ts
//external js function declaration
declare function getToday(): any;
declare function greetings(name: any): any;
ngOnInit(): void {
// call the externaljs functions
getToday(); // without param
greetings('rohol'); // with param
}

Maybe isn't the cleanest way to do it but you can achieve this with:
let scriptTap = document.createElement('script');
scriptTag.src = '<route to your scripts>';
document.body.appendChild(scriptTag);
The best way to integrate is creating the library from ng new project-name -create-application=false
then you add the library with ng g library name-of-library
and you will have a clean project to develop your library

Use external javaScript library in angular 4 Component Library created with ng-packagr

With lots of help from this excellent article by Nikolas LeBlanc, I'm trying to create an Angular 4 component library:
https://medium.com/#nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
The problem is this... my library depends on an external JavaScript file - let's call that somefunctions.js.
In a regular Angular 4 application - I've been able to do this by referencing the file in the angular-cli.json file:
"scripts": [
"./app/js/somefunctions.js"
],
... then declare the variables as type any in the typings.d.ts file.
This makes the JavaScript file available to the application, and it works just fine.
However - my goal is to create an Angular 4 component library, and package/publish it to npm.
When I follow the instructions for creating the library - the feature module is packaged without somefunctions.js.
So - if someone else installs my module, they won't have somefunctions.js, and it obviously won't work.
So, I guess I need to know how to tell ng-packagr to bundle the module so that it includes somefunctions.js, and how to set up my module so that my code can reference that file when the module is installed in other applications.
Thanks in advance!

How to add date picker or any general jQuery plugin to Ember-CLI App

So I am trying to add pikaday date picker to Ember-CLI app.
I've got the following in my /app/views/calendar-view.js
import Ember from 'ember';
export default Ember.TextView.extend({
modelChangedValue: function(){
console.log(this.get('value'));
}.observes("value"),
didInsertElement: function(){
currentYear = (new Date()).getFullYear();
formElement = this.$()[0];
picker = new Pikaday({
field: formElement,
yearRange: [1900,currentYear+2]
});
this.set("_picker", picker);
},
willDestroyElement: function(){
picker = this.get("_picker");
if (picker) {
picker.destroy();
}
this.set("_picker", null);
}
});
My main issue is how to add the plugin itself into ember-cli?
This is the github link for pikaday: https://github.com/dbushell/Pikaday
More specifically I think this part might be important since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support
So how do I add the plugin itself to ember-cli?

Update
Since writing this answer, the Ember Addon API has become more usable and are a perfect option if you're building an Ember component/mixin/other class that adds to the regular js plugin.
Regular install
In a 'regular install' situation, you want the plugin to be available through your app and be included in the app's payload no matter what. To do this, add the file/package to your project's vendor directory. There are two immediately available ways to do this: use Bower or simply save a file or package in the directory.
1) Bower
Use Bower to install the package either through the terminal, like:
bower install ember-validations
Or, if there is no easy-install Bower package available, in your bower.json file:
{
"name": "app",
"dependencies": {
"chosen": "https://github.com/harvesthq/chosen/releases/download/v1.1.0/chosen_v1.1.0.zip"
}
}
2) Writing a file
You don't have to use Bower to add files and directories to your vendor directory. You could create a file anywhere inside the vendor directory, copy and paste the plugins javascript into it and save it, and it will still be available to import into your app.
3) Making it available in your app
Regardless of the method through which you create and save the plugin scripts, you have to still have to import the file directly into your app. You do this in Brocfile.js. Add an import with the path to the file (main file if it's a bower installed package) just before module.exports = app.toTree();.
app.import('vendor/ember-validations/index.js');
app.import('vendor/chosen/chosen.jquery.min.js');
There's more info in the Managing Dependencies section of the ember-cli docs.
Polyfill or other non-essential plugins
There are some situation in which you don't want to always load/run a script in your app. For example, you are loading a large polyfill only when the user is using IE. In this situation, you can create a directory in public/assets to hold the javascript files and load them using jQuery's $.getScript() method in an initializer or somewhere else within your Ember app.
I answered a similar question about that kind of scenario here.