Can I use JSRender and JSViews libraries(http://www.jsviews.com/) in building Chrome Packaged App? Does it violate the CSP policy?
This library syntax uses "script" tag to identify template definition in the HTML file...following is an example of it
<script id="theTmpl" type="text/x-jsrender"> <div> <em>Name:</em>
{{:name}} {{if showNickname && nickname}}
(Goes by <em>{{:nickname}}</em>) {{/if}} </div> </script>
I don't believe JsRender and JsViews are currently CSP compliant, because template compilation uses new Function(). However pre-compilation should be very easy. See jsrender/issues/30 and jsrender/issues/164 . A precompile tool is planned for V1 or V1.1.
In fact you can already do your own precompiling simply by writing:
var myTemplate = $.templates("myTemplateMarkupString");
As to the script tag, no, you don't have to use that approach to declaring templates. As shown above, you can compile from strings or precompile. See http://www.jsviews.com/#compiletmpl for more details and examples.
Related
So recently I was making a website and I added a login page. I wanted to check if the username and password entered existed in the database and if not it would give an alert saying invalid username or password. My code is:
<form>
<label>Enter Username:</label>
<input type="text" id="username">
<br>
<label>Enter Password:</label>
<input type="password" id="password">
<br>
<input type="submit" onclick="submitLoginInfo()">
</form>
and the js is
const { LoginSchemaModel } = require('./dbconfig.js')
// import { LoginSchemaModel } from './dbconfig'
requirejs()
function submitLoginInfo () {
let usernameElement = document.querySelector('#username')
let passwordElement = document.querySelector('#password')
console.log(`Username Element is HTMLElement: ${usernameElement instanceof HTMLElement}`);
console.log(`Username Element is HTMLElement: ${passwordElement instanceof HTMLElement}`);
alert(`usernameElement = ${usernameElement}`);
alert(`passwordElement = ${passwordElement}`);
alert(`username = ${usernameElement.value}`);
alert(`password = ${passwordElement.value}`);
}
Now the problem is with the require because that is not supported. So I decided to use imports instead and added "type"="module" to my package.json but was still getting an error in the console saying I can't use it. Then I used requirejs and ran into this issue where I couldn't import requirejs without using the require function. When I tried to add
var requirejs = require('requirejs')
requirejs.config({
nodeRequire: require
});
it would say that I couldn't use require(). When I tried to do it in a seperate file I realized I had to require that file to use requirejs which wouldn't work. I have no idea on how to fix this, I have been searching stack overflow and other websites but nothing mentions this. I want to know if there is a different way which I have just been missing this whole time.
I will assume that you are just declaring the js in some HTML with a script that will run in the client. Like that <script src="./myscript.js"></script>
Why you couldn't use require
require is the way we import modules in Node.js(an engine that runs javascript outside the browser) or any other javascript engine that adopts the CommonJs modules pattern. Browsers uses what is called ESModules.
Why did changing type="module" in package.json didn't solve this problem?
The package.json file is completely ignored by the browser, it doesn't affect anything in the javascript you import from the script tag. package.json is file used by node.js(and other engines). And type="module" is used in Node.js to use import instead of require, so wouldn't fix even if the browser read it.
How can we import things in browser javascript
Firstly I have to say that browsers usually expect people to use some bundling tool like webpack. (bundler is just a program that transforms all your .js files into a single .js file) instead of importing modules directly, but if you want to do it only using a web-browser and nothing more you can:
Add the type="module" in the script tag.
<script type="module" src="./myscript.js"></script>
Use something like the live server extension of vscode
Because, browsers cannot give .html files to have full access to your files, so you need to simulate a server in a folder.
So now you can simple use import {thing} from "./myscript.js" that will work.
How to use the require.js lib in the browser.
I have to say that you shouldn't use it, it is used by people that want some packages made for node.js to work on browser. But if one would want to use requires only using the browser they would have to remember that when we do npm i requirejs it creates downloads it into the node_modules folder, so we would have to import from there. But again, you shouldn't do that to solve your problem. Stick to the import.
I have included this code in my script. Can someone tell me step by step how to install Modernizer in a page, in English layman point of view?
if(Modernizer.geolocation){
alert("geolocation is supported");
}
"Modernizr is not defined" happens when you try to reference it somewhere in a code but have not included it previously.
You may have your
if(Modernizer.geolocation)
call before Modernizr is included, or you have not included it at all. There is also a case when Modernizr is included but within asynchronous script (in that case, there might be something like <script src="modernizr.js" async></script>).
How to include Modernizr - the easiest way?
First choose your detects - a set of features your custom built version of Modernizr will test:
https://modernizr.com/download
Than save it as modernizer.js somewhere in your source tree, for example 'js/modernizr.rs'. Include it in a script tag before first Modernizr call. Like:
<script src="js/modernizr.rs"></script>
<script>
if(Modernizer.geolocation){
alert("geolocation is supported");
}
</script>
I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like
<template>
<button #click="() => {some code... }">Click me</button>
</template>
Arrow functions works fine inside script tag, but problem with template tag drives me mad.
Functions are not allowed in the template syntax so if the plugin allows it or not doesn't matter anyways + its not good practice --> create a method for it much cleaner and more readable.
Git hub issue for similar problem.
https://github.com/vuejs/vue-loader/issues/364
I'd say it's supported already in vuejs 2.0. I have tested it and it's also written in the docs:
<comp :foo="bar" #update:foo="val => bar = val"></comp>
Just PhpStorm is complaining... If you raise a bug I will upvote!
Is it possible to use Google Closure Templates with Clojurescript?
I have looked around but haven't found any information regarding this.
As the Soy Templates are compiled down to JavaScript functions, you should be able to use it without any problem. Look here for a general explanation of how to use external JavaScript libraries in ClojureScript:
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
You should also compile your templates with this flag: --shouldProvideRequireSoyNamespaces, look here for more information.
As another option you could use a templating library written for ClojureScript. There are at least two great libraries: Dommy and Enfocus.
The Google Closure templates should work in ClojureScript without much hassle. Try referencing the goog.whatever namespace at the top of your ClojureScript file like normal. If you're not using advanced mode compilation, then reference your cljs file's namespace with a goog.require in the HTML page. Otherwise, you don't need goog.require when compiling in advanced mode.
So if you have a project named foo, a ClojureScript file named bar, and you want to use goog.dom without advanced mode, you could try something like this:
cljs file
(ns foo.bar
(:require [goog.dom :as dom]))
in the index.html
<script type="text/javascript" src="js/compiled.js"></script>
<script type="text/javascript">
goog.require('foo.bar');
</script>
The twitterbuzz sample gives a good example of this.
How do hosted services like UserVoice embed their content on other web sites?
I see that it is via including a JavaScript file from the service provider on your own page, however, what I'm interested in are the building blocks for creating a service like that.
For example, do they use a library like jQuery, mooTools, or prototypejs and how do they avoid namespace clashes?
Also wondered if there were any books, articles, blog posts that go over this specific use of JavaScript (not looking for general resources on JavaScript).
Regards and thanks in advance,
Eliot
Here is a great tutorial I found on How to build a web widget (using jQuery)
Generally, what you are describing is called a "Javascript Widget" (UserVoice's just happens to show up on the side of the page).
There is a good tutorial about creating Javascript Widgets that you can check out.
The basic structure of such an embeddable service would be:
If the service doesn't mandate that the script is to be included at the bottom of the page, hook the body onload event, without stepping on the toes of any existing handlers (by intercepting the existing handler function, which could in turn be chained to other functions).
Inject new HTML elements into the document. The HTML code would most likely be inlined into the script as string literals as setting innerHTML on a single injected element would be easier and faster than direct DOM manipulation using a flurry of function calls.
The entire script should live inside a closure to avoid name clashes.
A JS framework may or may not be used; caution is required when including a framework since it could clash with a pre-existing, different framework, or a different version of the same framework.
EDT: Generally you'll make your client/customer/friend include a script in their page, then via that script you can do following:
In pure JS you can load scripts from remote location (or not so remote) dynamically via
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'your/remote/scripts/path.js';
document.getElementsByTagName('body')[0].appendChild(script);
// $.getScript('your/remote/scripts/path.js'); in jquery but you'll be sure jQuery loaded on remote site
Then script you loaded can perform different actions like creating elements like this
var body = document.getElementsByTagName('body')[0];
var aDiv = document.createElement('script');
/* here you can modify your divs properties and look */
body.appendChild(aDiv);
// $('').appendTo('body'); for jQuery
For deeper look into JavaScript you can read for example Javascript: The Good Parts or Definitive Guide To Javascript.