I've been trying to sort this out for a while; my goal is to use Polymer modules inside the Aurelia framework. There's a tutorial here (on the official documentation), but that's not for a CLI generated app.
my aurelia.json file has the following dependencies:
…
"aurelia-html-import-template-loader",
"aurelia-polymer",
…
(installed using npm)
and the index.html file looks like this:
<head>
<title>Aurelia</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
…
I have no errors in the CLI/console upon building.
main.js
aurelia.use.plugin('aurelia-polymer');
loads fine but
aurelia.use.plugin('aurelia-html-import-template-loader');
gives errors in the browser console:
vendor-bundle.js:21513 GET http://localhost:9000/app.html
Unhandled rejection Error: Load timeout for modules: template-registry- ………
I've been talking to a bunch of lads on aurelia/gitter, but so far I've found nobody who was able to get 'aurelia-html-import-template-loader'working in the CLI.
Thanks for reading,
have an awesome day
From aurelia-polymer:
Using with Webpack
If you're using webpack, you won't be able to use
aurelia-html-import-template-loader, which means you won't be able to
load Polymer elements in your templates directly (see #18). Instead,
it's suggested that you use vulcanize to bundle all the Polymer
elements you use into one file that can be loaded in index.html. The
elements will still be available in your templates once loaded, but
this avoids the syntax issues that require the HTML import template
loader.
I haven't tried it with aurelia-cli yet, but it's worth a shot.
Related
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.
I'm once again attempting to use the meteor-accounts-t9n package and I'm seriously flipping out with the vague explanations provided in the package's GitHub.
I added the package with meteor add meteor-accounts-t9n as well as the accounts-password and accounts-ui packages.
Then I created part of my usual project structure: client folder, server folder and lib folder.
I got nothing on server for now.
I configured my client html to be like:
<head>
<title>t9nTest</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
{{> loginButtons}}
</template>
My javascript is like:
Template.loginButtons.onRendered(function(){
T9n.setLanguage("pt");
});
I've attempted with Meteor.startup as well.
I added a t9n folder under lib. On that folder I put a file called pt.coffee and put the entire portuguese structure available on the project's github.
KEEP IN MIND THIS IS MY ONLY COFFESCRIPT FILE - I'M WANT TO USE JAVASCRIPT
Still nothing. What am I missing? What is the appropriate usage of the package in order to translate the accounts-ui loginButtons form?
I also have gotten this error on the client-side: "Uncaught Error: No such function: t9n" when I attempt to directly convert a string returned by a helper function with `
{{t9n textReturned}}
As far as I know, in terms of translations for account-related UI elements (buttons, links, placeholders and so on), meteor-accounts-t9n is set to work with the meteor-useraccounts packages. (core and framework-specific, such as bootstrap, foundation, ratchet...)
With the meteor-useraccounts packages installed and in use (using {{> atForm}}), all you need to do is, like you said, install the meteor-accounts-t9n package:
$ meteor add softwarerero:accounts-t9n
And that's it, the translations should be in place according to the default language. All you need to do to change the language for your account elements is (here for portuguese):
T9n.setLanguage("pt");
I am having trouble getting React components to work in my Twig templates in Symfony2, using RequireJS to initiate them. I was trying to get this one to work: https://github.com/rackt/react-autocomplete
First I installed it, locally, in parallel to where I have my css files for my templates:
npm install react-autocomplete
Then, some selected parts from my twig template:
<html>
<head>
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"> </script>
</head>
<body>
<div id="react_demo">
<script type="text/jsx">
require(["{{asset('/bundles/demobundle/js/node_modules/react-autocomplete')}}"], function (ReactAutocomplete) {
alert('react-autocomplete loaded');
});
</script>
</div>
</body>
</html>
And now, to the problem: it doesn't seem to find my React component - or doesn't understand that it is a React component I'm trying to load... for some background info I haven't done anything except for including the React and Require JS files, and install the component. Perhaps I've missed something?
Uncaught Error: Load timeout for modules: /bundles/demobundle/js/node_modules/react-autocomplete
That one looks like a CommonJS module and while those can be loaded with RequireJS it needs some additional configuration.
While the packages can have the CommonJS directory layout, the modules themselves should be in a module format that RequireJS can understand. Exception to the rule: if you are using the r.js Node adapter, the modules can be in the traditional CommonJS module format. You can use the CommonJS converter tool if you need to convert traditional CommonJS modules into the async module format that RequireJS uses.
Also see http://requirejs.org/docs/commonjs.html and https://stackoverflow.com/a/16522990/1630906
I'm working Jasmine on a Rails plugin that would be included in a Rails app that loads jQuery from a CDN. However, I'm running into issues running Jasmine tests in my plugin. I need to load jQuery before my source javascript files in app/assets/javascripts, but if I include jQuery in my jasmine.yml it doesn't get loaded before the source files:
jasmine.yml contents:
src_dir: "app/assets/javascripts"
src_files:
- "my_rails_plugin_source_includer.js"
spec_dir: spec/javascripts
asset_paths:
- "vendor/assets/javascripts"
my_rails_plugin_source_includer.js requires my source javascripts:
//= require my_jquery_dependent_script.js
//= require my_other_jquery_dependent_script.js
I'm using
bundle exec jasmine-headless-webkit --color --keep ./spec/javascripts/specs.js
to run my tests. I get an error message like
ReferenceError: Can't find variable: jQuery
ReferenceError: Can't find variable: jQuery
Test ordering seed: --seed 1629
My tests pass if I explicitly require a jQuery javascript file (e.g., jquery-1.9.1-min.js) in my_rails_plugin_source_includer.js. However, I don't want to do that, as I want the actual Rails app, rather than this plugin. Any suggestions on how to require jQuery before my source files? Requiring it in my specs or my helpers doesn't work, as Jasmine seems to always load the source files first (which of course makes sense).
I was able to solve this issue by doing the following:
Downloading jquery-1.9.1.min.js from the official jQuery source and storing it in my spec/javascripts/support/helpers folder.
Creating a source.js file in my spec/javascripts/support/fixtures folder (can be an arbitrary folder) that has the following contents:
//= require ../helpers/jquery-1.9.1.min
//= require ../../../../app/assets/javascripts/application
where app/assets/javascripts/application.js is the manifest for my plugin's JavaScripts.
Editing my jasmine.yml file to use the following sources:
src_dir: "spec/javascripts/support/fixtures"
src_files:
- "source.js"
As a result, the jQuery-dependent source JavaScripts have jQuery preloaded only for Jasmine testing.
Thanks for your answer, Fares, it gave me the insight into what's happening with the jasmine config file.
There's a predictable order to how files are included in your jasmine page's <head> tag.
First, my setup deatils:
rails 4.0.1
jasmine 1.3.2
jquery-rails 3.0.4 (which provides jquery-1.10.2)
Here's my spec/javascripts/support/jasmine.yml. I have no helpers, I don't need css files to test my particular app, and I removed all the comments.
src_files:
- spec/javascripts/lib/jquery-1.10.2.js
- app/assets/javascripts/tools/dependency-parser.js
spec_dir: spec/javascripts
spec_files:
- '**/*[sS]pec.js'
The <head> of my jasmine page contains the following, in order:
jasmine core <link rel="shortcut icon" type="image/png" href="/__JASMINE_ROOT__/images/jasmine_favicon.png">
<link rel="stylesheet" href="/__jasmine__/jasmine.css" type="text/css" media="screen">
<script src="/__jasmine__/jasmine.js" type="text/javascript"></script>
<script src="/__jasmine__/jasmine-html.js" type="text/javascript"></script>
<script src="/__jasmine__/json2.js" type="text/javascript"></script>
src_files <script src="/spec/javascripts/lib/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/app/assets/javascripts/tools/dependency-parser.js" type="text/javascript"></script>
helper_files <!-- I didn't have anything here -->
spec_files <script src="/__spec__/dependency-parser_spec.js" type="text/javascript"></script>
jasmine boot <script src="/__boot__/boot.js" type="text/javascript"></script>
My app uses the asset pipeline, and the jquery-rails gem, along with the typical includes in app/assets/application.js:
//=require jquery
//=require jquery-ujs
//=require tree .
Because I am using the jquery-rails gem, that means I don't actually have the jQuery JavaScript files anywhere to load directly - they should come from the asset pipeline if they come from anywhere. It also seemed that I couldn't include the app/assets/javascripts/application.js file for some reason. This turned out to be okay; I just want to test my custom JavaScript, which depends upon jQuery.
So, I simply downloaded the version of jQuery that my app is using (1.10.2), and put it in:
spec/javascripts/lib/ <= I created this folder
After that everything worked perfectly, because I could predictably load my .js files in the order in which I needed them. It's not perfect. I now manually have keep my jQuery version the same in my specs as whatever version of jquery-rails I use, but that's a rather minor thing for now...though it begs the question, "Why the hell do people package javascript file into a gem?" No other web framework does this kind of wacky stuff.
I also tried using the jasmine 2.0.0.rc5 gem (the current version as of this writing), because it was supposed to take care of asset pipeline issues like this, but it didn't work for me.
I also tried jumping to something more complex like using the jasmine-jquery or jasminerice gems, but found both of their implementations to be more complicated versions of what I did above. Once I understood how the config file was generating the contents of the <head> tag in my particular case, it was a relatively easy fix.
I may move to jasmine 2.0.0 when it's released, if I feel it's necessary (it supposedly has better Rails 4 support), but I'm pretty sure this solution is going to work out just fine.
I have a simple Dojo application, that does only one require call, loading all the dependencies. The trouble is, while it is extremely simple, it still ends up loading ~100 files from server. I tried to solve that problem using Dojo build system, but seems I don't have a deep enough understanding.
So my question is - given a list of dependencies, like the following:
["dojo/parser",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/dom-class",
"dojo/request",
"dijit/form/ValidationTextBox",
"dijit/form/Select",
"dijit/form/NumberSpinner",
"dijit/form/CheckBox",
"dijit/layout/ContentPane",
"dijit/Dialog",
"dojo/NodeList-traverse",
"dojo/domReady"]
how do I set up the build to create a single-file (or several-file, just not 100-file) dojo file?
If you're using Dojo's require() loader, there are build tools that you can use to combine files and minify. According to the site, the build tools aren't included in an official release, so you'll have to get them from the development version (specifically, look in the buildscripts directory).
The Dojo documentation contains some info on its build system that you may also find useful.
As a proof of concept, here are the steps I took:
Go to the download page, and download the Source Dojo Toolkit SDK (it's the only one that contains the util scripts needed for a build).
Extract to a location (for the sake of this post, let's say it's /opt/dojo-toolkit).
From the Dojo toolkit directory (i.e. /opt/dojo-toolkit), run the build util: ./util/buildscripts/build.sh action=release htmlFiles=/path/to/my/index.html (careful, this slowed my 5-year-old dual-core to a crawl)
Example of index.html (this one is exactly inside the dojo-toolkit directory):
...
<head>
<script src="dojo/dojo.js"></script>
<script>
dojo.require("my.test");
</script>
</head>
...
The require() call looks for nested modules (I couldn't get it to work with a top-level module), so in this case, I've got a my directory inside of dojo-toolkit which contains a test.js file. That file is the main "bootstrap" file which loads in all of the dependencies. I just put random require() calls in mine:
dojo.require('dijit.ProgressBar');
dojo.require('dijit.Tree');
And that should do it. Basically, running the build utility against your HTML file (the one that contains the reference to dojo.js) makes sure that all of the dependencies are found, starting from the top.
Note: the build system create a release directory with the built output, but it looks a little misleading at first - it appears to have minified each individual file, but if you look at your actual bootstrap file (my/test.js, in this case), it will be a combined, minified file with (I presume) everything you need to run your app.
Otherwise, if you're using AMD style require()'s (as in require.js), you can use its optimization tool. According to the site, it will:
Combine all dependent files (including require.js itself) into a single file. It analyzes the require() call to figure out which files it needs to combine.
Minify your JavaScript using either UglifyJS (default) or Closure Compiler.
I needed to do the same thing and this is how I solved it.
If you read the documentation about how to create custom builds (http://dojotoolkit.org/documentation/tutorials/1.8/build/), in the Layers section they talk about creating custom layers. You can add all the modules you need there. Here is an example of my custom layer file:
layers : {
"dojo/dojo" : {
include : [
"dojo/dojo",
"dojo/_base/window",//
"dojo/dom",//
"dojo/dom-class",//
"dojo/ready",//
"dojo/store/Memory"
],
customBase : true,
boot : true
}
}
What this will do is build only those modules into dojo.js, along with the bootstrap loader so that you can load other modules on the fly.