I'd like to know how to correctly bundle handsontable community edition library into Aurelia application. Handsontable is distributed as single JS file packed as webpack module, thus a hint may be useful for webpack modules generally.
Having Aurelia version 0.24.0 configured with default loader: RequireJS and default transpiler: Babel, NPM version 3.10.0. I did following steps in order to bundle handsontable into my application:
npm install handsontable
then edited aurelia-project/aurelia.json to add the following
dependencies:{ ...
{
"name": "handsontable",
"path": "../node_modules/handsontable",
"main": "dist/handsontable.full",
"resources": [
"dist/handsontable.full.css"
]
},
Then the component looks like: (view - htable.html):
<template>
<div ref="filetable"></div>
</template>
(viewmodel - htable.js in ES6):
import {Handsontable} from "handsontable";
export class htable {
...
attached() {
this.ht = new Handsontable (this.filetable, {
data: this.data,
rowHeaders: true,
colHeaders: true
});
}
}
However, any attempt to add such component fails with
Unhandled rejection TypeError: _handsontable is undefined
Another attemp I use in different library produce similar error:
import * as Handsontable from "handsontable";
...
this.ht = new Handsontable.Handsontable (this.filetable, {
Btw. A workaround is not to bundle and add handsontable into index.html which makes "Handsontable" global.
I'm a bit lost... I'm trying to use PDFJS to render a PDF with JavaScript and now I need to use a plugin to make text selectable. According to this article, I have to use this file. As it seems not to be available on npm, I added it to my source code and bundle it with webpack in a vendor.bundle.js file:
entry: {
"app": "./src/index.ts",
"vendor": ["pdfjs-dist/build/pdf.worker.entry", "./vendors/uiMask.js", "./vendors/pdfjs/text_layer_builder.js"]
}
Now, I'd like to use it in my TypeScript file, so I do:
var TextLayerBuilder = require('../../../vendors/pdfjs/text_layer_builder');
Webpack does not complain but when I do:
let textLayer: any = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
pageIndex: page.pageIndex,
viewport: viewport
});
Chrome says that TextLayerBuilder is not a constructor. When I do a console.log of this object, it appears to be an empty object.
How can I use this file in my TypeScript one?
I'm trying to load the 3rd party library PapaParse into my Aurelia application, but can't seem to make it work as a dependency. I've tried every form listed in the Aurelia docs. Instead, I need to add it to my aurelia.json's bundles.<vendor-bundle>.prepend section.
I first npm install papaparse --save then
aurelia.json
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/papaparse/papaparse.js", // Has to go before require.js
"node_modules/requirejs/require.js"
],
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
//"papaparse" here does not work,
...
],
...
}
But this way creates a global Papa variable. I would much rather it be a dependency that I can import.
Any ideas on why it's not working as a standard dependency and what I can do to make it work?
Put this in your aurelia.json
{
"name": "papaparse",
"path": "../node_modules/papaparse/",
"main": "papaparse"
}
and import in your class:
import PapaParse from 'papaparse';
constructor() {
//papaparse is ready
console.log(PapaParse);
}
I've got an app I'm building in Sencha Touch 2 then packaging into android. What I want to include is a "defines.js" file which contains all my variables. (This app is to be altered for different people so this makes things easier to change)
I've got it to work fine on the browser by adding the script link to the index.html file, but when I package it up and run it on the android emulator it can't find the variables.
Any ideas? Ask if you need more information.
Currently the file resides under "resources/defines.js"
Edit:
I want to include a file containing variables for use in the app (titles etc)
It is called "defines.js".
I have linked it in the index.html using the following script tag:
<script type="text/javascript" src="resources/defines.js"></script>
I have also added into the to js section of the app.json:
"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
{
"path": "resources/defines.js"
}
],
It works in a browser but not when I created a native android app.
You can try a more 'sencha' way.
First, remove the:
<script type="text/javascript" src="resources/defines.js"></script>
and also remove the entry on app.json:
{
"path": "resources/defines.js"
}
Then, in your app.js add the resources path for the loader:
Ext.Loader.setPath({
....
'Resources': 'resources'
});
Require the class:
Ext.application({
...
requires: [
'Resources.defines',
...
]
....
});
Define the class in the file resources/defines.js:
Ext.define('MyApp.resources.defines', {
alternateClassName: 'Defines',
singleton: true,
BASEURL: 'localhost/myapp',
APPVERSION: '0.1',
});
Tehn, you can access the object properties by:
Defines.BASEURL
Defines.APPVERSION
Hope it helps-
How are you creating packaging the android app?
Using Sencha native packaging or the cordova packaging over Sencha touch
I'm at the beginning of building my project and I get some errors that couldn't realize why they are being occured.
You can see contents of my app.profile.js file below. I execute
"build profile=../../app.profile.js -r" this line from command prompt and I get no error after the process is done. My problem is if I copy the release(built) version of these packages to the place where the unbuilt versions exist, I get too many javascript errors like "Error: multipleDefine". Even if I copy only dojo, dojox and dijit folders, same errors are keep occuring.
When I look the differences between built and unbuilt of two js files, (for example dojo/Deferred) the only difference I realize is this:
//built
define("dojo/Deferred", [
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function(
define([
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function(
So I'm a little bit stucked at the beginning. I want to try using layers to reduce http requests as soon as possible but I need some help about the situation I mentioned. Any help will be greatly appreciated, thanks.
app.profile.js:
var profile = {
basePath: "..",
layerOptimize: "shrinksafe.keepLines",
optimize: "shrinksafe",
releaseDir: "./release",
hasReport: true,
packages: [
{
name: "dojo",
location: "./dojo"
},
{
name: "dijit",
location: "./dijit"
},
{
name: "app",
location: "./app"
},
{
name: "dtk",
location: "./dtk"
},
{
name: "dojox",
location: "./dojox"
}
],
layers: {
"app/layers/core": {
include: [
"dojo/_base/declare",
"dtk/core/ILifeCycle",
"dtk/core/AppConfig",
"dtk/core/TopicContext",
"dtk/core/NavigationContext",
"dojo/require",
"dojo/_base/Deferred",
"dojo/DeferredList",
"dojo/_base/lang"
]
},
"app/layers/appcontext": {
include: [
"dtk/core/AppContext"
],
exclude: [
"app/layers/core"
]
}
}
};
The Dojo builder will add a module identifier to every module definition unless you tell it not to. This can produce the multipleDefine error.
From the builder documentation:
insertAbsMids (default = undefined)
[truthy] Causes the transform to ensure that every AMD define
application includes a module identifier argument.
[falsy] The
transform does nothing to the module identifier argument in define
applications. In particular, a falsy value doe not cause the
transform to remove a module identifier argument that exists in the
source code.
I was having exactly the same problem until I added insertAbsMids:false to my profile.
eg:
var profile = {
basePath: "./",
releaseDir: "release",
action: "release",
layerOptimize: "shrinksafe",
optimize: "shrinksafe",
cssOptimize: "comments",
mini: false,
insertAbsMids: false,
packages: [
{ name: "dijit", location :"dijit" },
{ name: "dojox", location :"dojox" },
{ name: "dojo", location :"dojo" }
]
}
If your problem is with the id that gets created in the AMD module define(id, [deps], factory)..
I was having a similar issue, I had to manually remove all the id's on the compressed files:
//built
define([
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function()
OR, I had to require the module using the id instead.
For example, I was requiring a module:
require(["app/Dialog"])
which was different than the id added.
require(["demo/app/Dialog"])
It was the only way I got it to work. Anyone else knows how to remove the id or reason why we should always have an id? Not sure if this is relavent to your question, but since you showed the differences.
This will build a layer, requiering all modules needed to create the dojox.image.Gallery besides the components mentioned in the discardLayer.
layers: [ {
name: "../dojox/discardLayer.js",
discard: true,
dependencies: [
"dojox.image.Gallery",
"dojox.image.SlideShow",
"dojox.image.ThumbnailPicker"
]
},{
name: "../drops/layer.js",
layerDependencies: [ "../dojox/discardLayer.js" ],
dependencies: [
"dojox.image.Gallery"
]
Try instead of exclude, use the layerDependencies key - i think the exlude looks for app/layers/core from withing your dojo_source tree and not in dojo_release tree.. So at time of build youre excluding an unknown component.
The above sample is something i've used to be able to override the 3 discarded components elsewhere, however it doesnt suit your needs.
You would need to Not set discard for your core layer and instead simply set it as a dependency (which will exclude all dependencies to the layers, which has allready been built).
Then, depending on which version of dojo youre using - you should call dojo.require("layers.core"); dojo.require("layers.appcontext") or require(["layers/core", "layers/appcontext"], function() { }); to assert that those layers are present.
Before using anything from their dependencies, pull in the requirement with another require call, e.g. dojo.require("dijit.form.Button"); new dijit.form.Button({ ... });. The layer will fill the components into a cached hash (dojo.cache) and to make sure theyre declared fully, pull in the requirement.