If we don't want to use ES6 import nor any third party libraries (like require.js etc.) nor any package builder, what is the classical way to pack a library so that the user can use it with what seems to be a library-namespace?
index.html (from the perspective of the user of the library)
<canvas id="mycanvas"></canvas>
<script src="canvas.js"></script>
<script>
canvas.setup({"config1": true, "config2": false});
var mycanvas1 = canvas.get("#mycanvas");
</script>
I sometimes see code similar to
// canvas.js
(function (window, something, else) {
window.canvas.setup = function() { ... } // how to export functions setup and get?
})(window, ..., ...);
How to do this IIFE properly to create this canvas.js library example?
Note: with ES6 import, we can package this way a library called canvas.js:
const canvas = {
setup: config => { console.log("config"); },
get: id => { console.log("get"); }
};
export default canvas;
and use it a index.html this way:
<canvas id="mycanvas"></canvas>
<script type="module">
import canvas from "./canvas.js";
canvas.setup({"config1": true, "config2": false});
var mycanvas1 = canvas.get("#mycanvas");
</script>
but in this question here I am curious about the pre-ES6 solution.
A solution seems to be:
// canvas.js
canvas = (function(window) { // assign the result of the IIFE to a global var to make
// it available for the user of the lib
var internal_variable; // not accessible to the user of the lib
var state; // this variable will be available to the user of the lib
function setup(arg) {
console.log("setup");
}
function get(arg) {
console.log("get"); // + other lines using window object
}
return {setup: setup, get: get, state: state}; // important: here we choose what we
// export as an object
})(window);
Now the user can use the library this way:
<canvas id="mycanvas"></canvas>
<script src="canvas.js"></script> // object canvas is now available
<script>
canvas.setup({"config1": true, "config2": false});
var mycanvas1 = canvas.get("#mycanvas");
console.log(canvas.state);
</script>
Related
I'm interested in using the Monaco editor in a Vue.js backed Electron project.
Thus far:
Microsoft provides an Electron Sample (which I've run and works correctly)
There are a variety of vue.js npm repos for monaco - yet none of them seem to fully support Electron right out of the box.
The one that looks most promising is vue-monaco but I've run into issues correctly integrating it.
AMD Require?
This is the code from the Microsoft sample for using with Electron
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monaco Editor!</title>
</head>
<body>
<h1>Monaco Editor in Electron!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
</body>
<script>
// Monaco uses a custom amd loader that overrides node's require.
// Keep a reference to node's require so we can restore it after executing the amd loader file.
var nodeRequire = global.require;
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = global.require;
global.require = nodeRequire;
</script>
<script>
// require node modules before loader.js comes in
var path = require('path');
function uriFromPath(_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/');
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName;
}
return encodeURI('file://' + pathName);
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
</script>
</html>
The module I'm using allows for something like this:
<template>
<monaco-editor :require="amdRequire" />
</template>
<script>
export default {
methods: {
amdRequire: window.amdRequire
// Or put this in `data`, doesn't really matter I guess
}
}
</script>
I can't seem to figure out how to get the correct amdRequire variable defined in Electon + vue. I believe if i can conquer this everything else becomes simple.
The Electron FAQ mentions something about this (i think): I can not sue jQuery/RequireJS/Meteor/AngularJS in Electron
Sample Code
I put a sample project up on GitHub https://github.com/jeeftor/Vue-Monaco-Electron with the "offending" component being in ./src/renderer/components/Monaco.vue
Summary
How can I get this Monaco Editor to load correctly inside of a Vue.js component that will be run inside electron?
Thanks for any help you can offer.
I'm doing nearly the same, just without the extra vue-monaco component. After struggling quite a bit, I could solve the problem:
function loadMonacoEditor () {
const nodeRequire = global.require
const loaderScript = document.createElement('script')
loaderScript.onload = () => {
const amdRequire = global.require
global.require = nodeRequire
var path = require('path')
function uriFromPath (_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/')
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName
}
return encodeURI('file://' + pathName)
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../../../node_modules/monaco-editor/min'))
})
// workaround monaco-css not understanding the environment
self.module = undefined
// workaround monaco-typescript not understanding the environment
self.process.browser = true
amdRequire(['vs/editor/editor.main'], function () {
this.monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
})
})
}
loaderScript.setAttribute('src', '../node_modules/monaco-editor/min/vs/loader.js')
document.body.appendChild(loaderScript)
}
I've just taken the electron-amd sample and adjusted it a bit. I call the loadMonacoEditor function in the components' created function.
In order to not get the Not allowed to load local resource: file:///C:/.../node_modules/monaco-editor/min/vs/editor/editor.main.css problem, you also have to set
webPreferences: {
webSecurity: false
}
in your instance of the BrowserWindow.
I have a JavaScript file called abc.js that has a 'public' function called xyz(). I want to call that function in my Angular project. How do I do that?
Refer the scripts inside the angular-cli.json (angular.json when using angular 6+) file.
"scripts": [
"../path"
];
then add in typings.d.ts (create this file in src if it does not already exist)
declare var variableName:any;
Import it in your file as
import * as variable from 'variableName';
In order to include a global library, eg jquery.js file in the scripts array from angular-cli.json (angular.json when using angular 6+):
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
After this, restart ng serve if it is already started.
Add external js file in index.html.
<script src="./assets/vendors/myjs.js"></script>
Here's myjs.js file :
var myExtObject = (function() {
return {
func1: function() {
alert('function 1 called');
},
func2: function() {
alert('function 2 called');
}
}
})(myExtObject||{})
var webGlObject = (function() {
return {
init: function() {
alert('webGlObject initialized');
}
}
})(webGlObject||{})
Then declare it is in component like below
demo.component.ts
declare var myExtObject: any;
declare var webGlObject: any;
constructor(){
webGlObject.init();
}
callFunction1() {
myExtObject.func1();
}
callFunction2() {
myExtObject.func2();
}
demo.component.html
<div>
<p>click below buttons for function call</p>
<button (click)="callFunction1()">Call Function 1</button>
<button (click)="callFunction2()">Call Function 2</button>
</div>
It's working for me...
You can either
import * as abc from './abc';
abc.xyz();
or
import { xyz } from './abc';
xyz()
I resolved this issue by adding "allowJs": true within "compilerOptions" in tsconfig.json file!
- Let us assume our script file custom.js looks like this: -
var utilObj = {
dummyFunc: () => {
console.log('Calling dummy function!');
}
}
- Add your javascript/script file in scripts array in angular.json file.
"scripts": [
"src/custom.js"
],
Should look like this: -
- Add below code snippet in typings.d.ts. If this file doesn't exist, create one in src folder.
declare var utilObj:any;
Keep your variable name similar to property of script file. Here utilObj is the property name.
- Now, You can consume this script/js file directly in your component or .ts file.
You need not import the file in component file or .ts file now as we have given the typing defination for the script file already in typings.d.ts file.
Example: -
ngOnInit() {
console.log('Starting Application!');
utilObj.dummyFunc();
}
- Output: -
This might sound silly, but if you feel that you are properly exporting your JavaScript helper function utils/javaScriptHelperFunction.js
export function javaScriptFunction() {
// DO HELPER FUNCTION STUFF
}
If you have done your checks as mentioned in the above answers, just close and open your code editor...start with the quick basic troubleshooting before going down the rabbit hole.
I've got the following codeblock in the layout.js
import $ from "jquery";
import LayoutModel from 'js/models/LayoutModel';
let elements = {
$window: $(window),
$html: $('html'),
$content: $('#content')
};
let viewmodel = null;
export function init(options) {
viewmodel = new LayoutModel(options, elements);
ko.applyBindings(viewmodel, elements.$content[0]);
}
and I load it in the view with system.js and call the init() with options. The options contains values and it has to be in the view because some of it comes from the back-end model.
System.import('resources/javascript/layout').then(function(controller) {
var options = {
something: 'value'
};
controller.init(options);
});
This solution works while it's not bundled with jspm:
jspm bundle resources\javascript\layout resources\javascript\dist\layout.min.js --minify
In production I have to do it, but in this case I'm not able to use the system.import() and the .then(), because I have to load the bundled script with a normal <script> tag:
<script src="resources\javascript\dist\layout.min.js"></script>
So the question: How can I bundle and minify it and call the init() method with the options?
Thank you!
I'm creating an HTML element using Polymer, and I want it to be able to work with an ES6 class I've written. Therefore, I need to import the class first and then register the element, which is what I do:
(function() {
System.import('/js/FoobarModel.js').then(function(m) {
window.FoobarModel = m.default;
window.FoobarItem = Polymer({
is: 'foobar-item',
properties: {
model: Object // instanceof FoobarModel === true
},
// ... methods using model and FoobarModel
});
});
})();
And it works well. But now I want to write a test HTML page to display my component with some dummy data:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<link rel="import" href="/html/foobar-item.html">
</head>
<body>
<script>
(function() {
var data = window.data = [
{
city: {
name: 'Foobar City'
},
date: new Date('2012-02-25')
}
];
var view;
for (var i = 0; i < data.length; i++) {
view = new FoobarItem();
view.model = data[i];
document.body.appendChild(view);
}
})();
</script>
</body>
</html>
Which isn't working for one simple reason: the code in the <script> tag is executed before Polymer registers the element.
Thus I'd like to know if there's a way to load the ES6 module synchronously using System.js or even better, if it's possible to listen to a JavaScript event for the element registration (something like PolymerElementsRegistered)?
I've tried the following without success:
window.addEventListener('HTMLImportsLoaded', ...)
window.addEventListener('WebComponentsReady', ...)
HTMLImports.whenReady(...)
In the app/scripts/app.js script from the polymer starter kit, they use auto-binding template and dom-change event
// Grab a reference to our auto-binding template
var app = document.querySelector('#app');
// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');
});
Also check this thread gives alternatives to the polymer-ready event.
In order to load missing modules, YUI allows us to specify them in use(...) method, pass in a callback and perform our actions when all modules are loaded - asynchronously. This presents a number of problems in my case. More specifically, I find it impossible to instantiate my class outside of the current file if I have my classes created inside the callback (no guarantee that they will be ready by the time "new" happens). My work-around was to wrap only certain method calls in YUI.use(...) but this creates another problem with extending objects. Ideally, what I need to do is load all modules synchronously before any of my code executes. Below is my code that currently fails succeeds (EDIT: Allow Rollups).
HTML:
<html>
<head>
<!-- Built using YUI dep configurator -->
<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/oop/oop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-style-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/node/node-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.js"></script>
<!-- My JS -->
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
var test = new MyNS.ExtendingClass();
</script>
</head>
<body>
<h1>Hello World!</h3>
</body>
</html>
test.js
//namespace
if (!MyNS) var MyNS = {};
(function(){
var Y = YUI().use('node', 'io', 'autocomplete');
MyNS.BaseClass = function() {
console.log('Base class newed. Y: ' + Y);
var self = this;
self.init();
};
MyNS.BaseClass.prototype = {
init: function() {
console.log('Initting! Y: ' + Y);
}
, test: function() {
console.log('test fired!');
}
};
})();
(function(){
var Y = YUI().use('node');
MyNS.ExtendingClass = function() {
console.log('Extended class newed. Y: ' + Y);
var self = this;
MyNS.ExtendingClass.superclass.constructor.call(self);
};
MyNS.ExtendingClass.prototype = {
testExtended: function() {
console.log('testExtended fired!');
}
};
Y.extend(MyNS.ExtendingClass, MyNS.BaseClass);
})();
This code now works but requires 10 (!!!) js files to make it happen. Is there a way to make sure all dependencies are loaded dynamically and before my code is executed? There must be, right?
You can solve this by putting each of your classes inside their own YUI module and use YUI to do the namespacing.
Create a new file my-classes.js, containing both your class definitions:
YUI().add('baseClass', function(Y) {
// constructor
Y.namespace('NS').BaseClass = function () {
this.msg = 'hi!';
}
}, '1', {requires: ['oop', 'node', 'event']}); // dependencies for your class
YUI().add('extendingClass', function(Y) {
// constructor
Y.namespace('NS').ExtendingClass = function () {
Y.NS.ExtendingClass.superclass.constructor.call(this);
alert(this.msg);
}
Y.extend(Y.NS.ExtendingClass, Y.NS.BaseClass);
}, '1', {requires: ['baseClass']});
Include the YUI seed file in your page:
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
Also include your class file and an init file:
<script type="text/javascript" src="my-classes.js"></script>
<script type="text/javascript" src="my-init.js"></script>
In your init file:
YUI().use('extendingClass', function(Y) {
Y.test = new Y.NS.ExtendingClass();
})
Now all the dependencies should be resolved and loaded up, before your code executes. It is asynchronous, however you asked for a solution that would ensure everything was loaded before your code executed.
Hope this helps.
Use Google Closure Compiler to compress and pack everything into single file. You could import multiple files into the compressor.
With advanced mode of Compression, Google Closure Compiler compresses 20-25% more than the YUI compressor in general for any library.