I would like to keep my polymer components nicely encapsulated but right now if I try to import any external modules into the components I get an undefined error for 'import'.
I use Webpack to bundle up my app but this packs up my javascript files only.
Is there a way to do keep my Polymer component encapsulated into a single html file or I must separate the js part when it comes to imports?
Example:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-new-view">
<template>
<style>
</style>
<h1>New view</h1>
</template>
<script>
import { myConstant } from '../module.js'; //<---- this throws error for the import'
Polymer({
is: 'my-new-view'
});
</script>
</dom-module>
Only Webpack
For it to work like that, you'd have to export module.js as a library so it can be used outside of Webpack. Once it's part of a library and included in the global scope you can then access it like
var myConstant = Module.myConstant;
Polymer({
is: 'my-new-view'
});
It's likely much easier to just have your JS code in a separate file.
See https://stackoverflow.com/a/34361312/4722305.
Crisper
One other option might be to run https://github.com/PolymerLabs/crisper over your code before calling into webpack. Crisper will remove the <script> tags from your code and convert them into JS files that will be compatible with Webpack.
Related
If you have an existing JS app that doesn't use ESM, CJS, but instead is just a bunch of vanilla JS, how do you export Svelte components to be used from random places in the app? I'd ideally like to have vanilla JS files that look like this:
import AddressComponent from './AddressComponent.svelte';
import DifferentComponent from './DifferentComponent.svelte';
// ... my js app code
const address = new AddressComponent({target: ...});
// ... more vanilla JS code
const address = new DifferentComponent({target: ...});
// ... more vanilla JS code
Or even without the imports, which I can manage as a list elsewhere for generating the Svelte components standalone if necessary.
Using rollup, it seems the only way things work is by specifying 'iife'. However, this bundles my entire app as an IIFE and breaks a lot of the code renaming things and what not. Seems to be no way around it.
I have gotten nice compiled components using this method Exporting Separate Custom Elements from Svelte Components, however that generates esm or cjs svelte components. Possibly there a tool to easily convert this format to vanilla JS? I've searched with no luck
I've used many combos of settings with gulp and rollup together with no success.
The bundle.js create by svelte automatically exports the app root component to the browser (unless you changes its name),
you can write in your bundle.js right before the return app; statement the following line:
app.Child = Child // or whatever your component is called
Then in your javascript:
var child = new app.Child({ target: document.body });
using the props you want.
Your HTML page should eventually look like this:
<script src="public/build/bundle.js"></script>
<link href="public/build/bundle.css" rel='stylesheet'></link>
<script>
var child = new app.Child({ target: document.body });
</script>
I'm using requirejs in a large project. This project will soon be upgraded to angular2.
Angular2 uses system.js, so I'm thinking of switching to system.js too. Should I be able to remove the reference to the requirejs library and include system.js instead and expect it to work, or is there something I don't understand here?
I tried by just removing the require.js file and adding the system.js file instead, but I get error messages saying define is not defined.
Can you help? Will I need require.js in addition to system.js?
I just switched to system.js too. You need to replace your require.js with system.js and add simple script tag. So it should look like this:
<script src="~/lib/system.js/dist/system.js" type="text/javascript"></script>
<script>
// set our baseURL reference path
System.config({
baseURL: '/app'
});
System.import('startup.js');
</script>
in addition to above steps set
System.defaultJSExtensions = true;
by default systemjs is not adding extension .js
I am trying to set up a tree view using an entity framework data object (EF 6 in MVC 5). I've run into a problem when I try to Render() my tree.... I receive the 'Object doesn't support property or method 'igTree'' error.
My code to set up the tree (in my view):
#(Html.Infragistics()
.Tree()
.Bindings(bindings =>
{
bindings.
TextKey("L1Name").
PrimaryKey("L1TODSID").
ValueKey("L1TODSID").
ChildDataProperty("L2Name").
Bindings(b1 =>
{
b1.
TextKey("L2Name").
ValueKey("L2TODSID").
PrimaryKey("L2TODSID");
});
})
.DataSource(Model)
.DataBind()
.Render()
)
I get no errors until I add in the 'Render()' call.
I read a post on the Infragistics forum asking if they will be supporting MVC 5... Are they not doing that? Is that my issue?
Also, these are my calling scripts:
<!-- Ignite UI Required Combined CSS Files -->
<link href="#Url.Content("~/igniteui/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
<link href="#Url.Content("~/igniteui/css/structure/infragistics.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/modernizr-2.7.2.js")"></script>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.3.min.js")"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src=#Url.Content("~/igniteui/js/infragistics.core.js")></script>
<script src=#Url.Content("~/igniteui/js/infragistics.lob.js")></script>
#(Html.Infragistics()
.Loader()
.ScriptPath("~/igniteui/js/")
.CssPath("~/igniteui/css/")
.Render()
)
Thanks in advance!
EDIT: Final Resolve.
Just in case anyone else ever runs accross this situation...
I knew this error ('Object doesn't support property or method...') could be caused by jquery loading twice. Thought I had thoroughly checked all script calls. However, being new to .NET and MVC 5 (razor), I completely missed this line at the end of my layout page (I didn't set up the project originally):
#Scripts.Render("~/bundles/jquery")
So...
In the end, I was initiallizing JQuery in my script block at the top (with a call to the minified file), then I was calling it again, which is what caused the error.
A big thanks to #nemesv, because the fact that he explained the loading process in greater detail than I could find online gave me the confidence to know that I was doing things correctly on that side. Then I just needed to hunt down the second call to initialize JQ.
Thanks again!
By default (if you are not using the loader infrastructure)
The .Render() call will render the following HTML:
<script type="text/javascript">
$(function () {$('#Tree1').igTree({ dataSource: ... });});
</script>
So you get the exception on the igTree function call which would initialize the tree.
Your igTree function can be undefined:
If you are not loading the necessary igniteui scripts:
<script src=#Url.Content("~/igniteui/js/infragistics.core.js")></script>
<script src=#Url.Content("~/igniteui/js/infragistics.lob.js")></script>
Make sure that these scripts are included in your view or in your Layour file
If you are not using the rigth path or the scripts file are not there on the server:
Check for broken link in your browsers network console (F12 in IE/Chrome FireBug in FF):
If you 404 error next to your script you will know that they are not loaded correctly and you need to fix the paths.
If you are referencing jQuery more than once can cause this error too:
Foe example you have the <script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script> in a partial which is loaded by Ajax multiple times, etc.
Make sure that you are referencing all your scripts once.
In the case of using the loader
When using the Loader infrasturure the .Render() call will render the a different HTML:
<script type="text/javascript">
$.ig.loader('igTree', function() {$('#Tree1').igTree({ dataSource: });});
</script>
So the loader will load the necessary script required by the tree so you don't need to include infragistics.core.js and infragistics.lob.js.
When using the loader in theory you could not the get the exception.
But if you call: #(Html.Infragistics().Loader()... after your Html.Infragistics().Tree() then the MVC wrapper does not that you are using the loader so it renders the HTML like when you don't use the loader so if you rightfully not referenced the infragistics.core.js and infragistics.lob.js. then you get the exception even if you are "using" the loader.
So make sure that you call #(Html.Infragistics().Loader()... before using any of the Infragistics controls.
I was also facing the same issue with MVC 4 and Ignite UI. Removing #Scripts.Render("~/bundles/jquery")
from the _Layout.cshtml resolved the issue.
I'm using require.js and optimize it with the node module r.js.
It works but I have one problem when trying to require a module after I've included require.js.
That's what I need:
<script data-main="/js/app-built" src="/js/vendor/require.min.js"></script>
<script type="text/javascript">
require(['Functions'], function(Functions){
console.log(Functions);
});
</script>
This doesn't work, as it doesn't find the Functions module.
But this works:
<script data-main="/js/app-built" src="/js/vendor/require.min.js"></script>
<script type="text/javascript">
require(['app-built'], function(){
require(['Functions'], function(Functions){
console.log(Functions);
});
});
</script>
Is there a way to achieve the first approach?
In your first snippet the problem is that by the time the first require call executes, it is quite possible (quite likely in fact) that RequireJS has not yet loaded your application. The data-main attribute initiates right away the loading of your main module but it only initiates it right away. The loading is still asynchronous. And the reason it works in your second snippet is that the outer require forces the inner require to execute after your main module is loaded.
So for your require call to be successful, RequireJS must have enough information to load it. So it must already have a configuration that will allow it to find your module. This either adding some configuration before you load RequireJS. You can set require to a configuration object which will be picked up by RequireJS when it is loaded:
<script type="text/javascript">
require = {
// Enough config to find the main module.
baseUrl: ...,
paths: ...,
bundles: {
// List here every module you want to load individually.
"app-built": ["Functions"]
}
};
</script>
<script src="/js/vendor/require.min.js"></script>
<script type="text/javascript">
require(['app-built']);
require(['Functions'], function(Functions){
console.log(Functions);
});
</script>
You don't have to pull the whole config out of your main module because RequireJS can combine configs, but there need to be enough there to allow RequireJS to start loading things. The app-built module could contain additional configuration that is not needed for the initial steps. In the code above I've dropped data-main and used require(['app-built']) instead because I'm not sure whether it is possible to still use data-main even when using the bundles parameter. (I'm concerned it might confuse RequireJS.) Using bundles will allow RequireJS to know that when you require Functions, it must find it in app-built.
Apart from perhaps still being able to use data-main instead of the initial require call (which I'm not sure you can do), I do not think it is possible to simplify this further.
is it possible to add arguments to the sctipt element
e.g.
<script
...
src="XX.js"
></script>
i want to add the argument hello="world" so this is added to the page:
<script
...
src="XX.js"
hallo="welt"
></script>
Reason: I have a js library (aloha-editor) which depends on a parameter for loading it's plugins (and the main functionallity is actuall in a plugin). However I only want to load the plugin when the user want's to edit and requirejs is the best choice since it is used at other parts in the application.
If you are wrapping the aloha script in a define function you could pass arguments like this (link):
//in main appfile
require.config({
'config': {
'aloha': {
src: "XX.js",
hallo: "welt"
}
}
});
//and in the aloha file
define(['module'], function (module) {
var src = module.config().src,
hallo = module.config().hallo;
... // the aloha code
});
There was also an alternative "simplified" syntax in the docs.
Edit: Maybe I misunderstood the question, if you where asking if it's possible to add html attributes to a script tag already on the page: <script src='' data-src='xx.js' data-hallo='welt'></script> is the new html5 syntax for adding custom attributes to tags, everything preceded by data- is correct syntax.