Trying to install polymer-quill via bower - polymer

New to bower and web components. I'm trying to install the polymer-quill library with bower.
npm install -g bower
mkdir polymerquill
cd polymerquill
bower install --save polymer-quill
Now I have a full bower_components directory. I make an index.html file and add the following:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer-quill/polymer-quill.html">
</head>
<body>
<h1>PolyQuill</h1>
<style is="custom-style">
polymer-quill.full {
--polymer-quill-editor-max-height: 300px;
--polymer-quill-editor-min-height: 100px;
}
</style>
<h2>Full Toolbar, Show Results, Max Height (300px), Min Height (100px), Save as Deltas, Save every 1 second</h2>
<polymer-quill content='{"ops":[{"insert":"Hello World! - Store as Delta"},{"attributes":{"header":2},"insert":"\n"}]}'
class='full'
store-as="delta"
save-interval="1000"
toolbar-type="full"
show-results>
</polymer-quill>
<h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save every 2 seconds</h2>
<polymer-quill content="<h2>Hello World! - Store as HTML</h2>" store-as="html"></polymer-quill>
</body>
</html>
When I open it in Chrome, however, I only see the h2's. The polymer-quill elements don't render. What am I forgetting to do?

I believe this element currently only works in Polymer's shady DOM (see issue here).
If you're using Polymer 1.0, declare shady DOM by adding the following script in your index.html: (reference)
<script>
/* this script must run before Polymer is imported */
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
If you're using Polymer 2.0, when importing webcomponents just add the shadydom attribute as follows:
<script src="webcomponentsjs/webcomponents-loader.js" shadydom></script>

Related

Use Nivo graph lib in a single HTML page (React)

I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959

How to import SCSS files into HTML files

I create a simple website project with simple HTML and SCSS.
the HTML file seems like this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="../../node_modules/bulma/bulma.sass">
<link rel="stylesheet" href="../../node_modules/bulma/css/bulma.css">
<link rel="stylesheet/scss" type="text/css" href="./header.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div class="header">
<div class="columns header-contents">
<div class="column is-four-fifths">
<div class="header-logo">
hier ist logo
</div>
<div class="header-title"> Title</div>
<div class="title-content">content</div>
</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
</div>
</body>
</html>
and I want to now import SCSS file into this HTML file, but it was not working.
Does anybody some solutions?
If you use VSCode you can install "Live SASS Compiler"
Then you can create a .scss file and click on "Watch Sass" on bottom-right
And it's going to compile your .scss file into a .css file that you can import into your HTML document.
Browsers do not automatically understand the SCSS files, you need to compile such files first into CSS. If you are a Node.js user, you may install the SASS compiler by running the command:
npm install -g sass
Then compile your SCSS file by running the command:
sass input.scss output.css
Now you can link output.css in your HTML file.
In codepen.io you can also work live with SCCS code. This is how:
In the CSS window pain, click on the little Settings icon on top right of the pane.
Then from the drop list for CSS Preprocessor choose SCCS.
I'm creating 3D text with it and it worked great. Now I have to compile that SCCS code to turn it into CSS. I will post it here after I figure out how to show you how cool it is or how badly things went.
This is my first time working with SCCS.
You can only "import" css files. SCSS and co are preprocessors which take their custom syntax and transform it into CSS. So you have to convert your SCSS into CSS and then <link> it in your HTML like regular CSS (bc. thats what it is.)
you can't import directly scss file in html , because html just read css file and you need to comple sass file to css by gulp or webpack
You can not "import" a SASS/SCSS file to an HTML document.
SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands.
Please use this link for compile sass/scss file.
https://thecoderain.blogspot.com/2019/12/run-and-compile-sass-scss-file-to-css.html
You don't import a SASS/SCSS file directly into an HTML file. Your SCSS will be compiled into a .css file, and you include that css file instead.
I would recommend looking up some tutorials on SCSS.
In Visual studio code, you can compile scss live. below are the steps
one time
npm i -g sass
To compile
sass --watch scss/index.scss css/index.css
In HTML
<link rel="stylesheet" href="css/index.css">
You don't import a SASS/SCSS file directly into an HTML file. Follow below steps
Type in terminal (if you have package.json in your project, you don't need this step) > npm init
Type in terminal> npm i sass --save
Add to package.json: "scripts": {"sass": "sass --watch sass/style.scss:css/style.css",},
Add 2 folders (sass & css) and add a file in sass (style.scss)
Type in terminal > npm run sass
Try using less:
<link rel="stylesheet/less" type="text/css" href="x.scss" />
<script src="https://cdn.jsdelivr.net/npm/less#4.1.1"></script>

How to get <iron-icons> to work in Polymer 2.x

Narrow Question
By troubleshooting, I think I have narrowed my "larger problem" down to the following question. (But I could be wrong.):
How do I properly download the latest version of <iron-icons> to my local machine?
By "latest version," I mean the version that is imported via the following:
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
The above version of importing <iron-icons> works on my demo here.
However, when I do either of the following:
bower install --save PolymerElements/iron-icons
bower update --save
And try to import on my local server like this:
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
it fails silently and I see no icons at all. But I do see extra space where the icons are supposed to render.
Bigger Question (the real problem I'm trying to solve)
I am trying to get my <iron-icons> to render properly in the browser.
What I expect to see
I expect to see a two <iron-icon> elements like this:
(anchored in between other test elements: Hello World and <img>)
What I actually see
No icons at all. But white space where they should render.
Steps to reproduce
Run
bower install --save PolymerElements/iron-icons
or, if <iron-icons> is already installed:
bower update --save
then
polyserve
or
polymer serve
Version
I believe I am using v2.0.1 of <iron-icons>. Here is the entire contents of the bower.json file.
bower.json
"iron-icons": "PolymerElements/iron-icons#^2.0.1",
Configuration
OS: macOS Sierra 10.12.6
Hardware: MacBook Air
Browser: Chrome Version 60.0.3112.113 (Official Build) (64-bit)
Demo
Here is my Plunker demo.
Code
The following code does render <iron-icons> as expected:
http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<dom-module id="demo-el">
<template>
Hello world
<iron-icon icon="add"></iron-icon>
<iron-icon icon="favorite"></iron-icon>
<img src="//lorempixel.com/400/200/" />
</template>
<script>
class DemoEl extends Polymer.Element {
static get is() {
return 'demo-el'
}
constructor() {
super();
}
}
customElements.define(DemoEl.is, DemoEl);
</script>
</dom-module>
The following code does NOT render <iron-icons> as expected (served locally):
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<dom-module id="app-main">
<template>
Hello world
<iron-icon icon="add"></iron-icon>
<iron-icon icon="favorite"></iron-icon>
<img src="//lorempixel.com/400/200/" />
</template>
<script>
class AppMain extends Polymer.Element {
static get is() {
return 'app-main'
}
constructor() {
super();
}
}
customElements.define(AppMain.is, AppMain);
</script>
</dom-module>
However, the above code does render <iron-icons> as expected when I do a direct substitution of:
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
for
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
Edit
By comparing the text of the imported files using the CDN
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
and local imports:
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
I discovered there is a discrepancy in the imported version of the iron-iconset-svg.html file. My bower.json file says the dependent version is "iron-iconset-svg": "1 - 2" or "iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0" but the bower.json file here says the dependent version is "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"
So, now the question appears to reduce to how do I get the local version of iron-icons.html to import the same version of iron-iconset-svg.html as the online CDN import version.
Edit 2
The problem persists when I just copy the iron-iconset-svg.html file from the CDN and paste it into my local file system. So, apparently something else is going on too.
Edit 3
I followed the instructions here for upgrading to Polymer 2.0:
https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies
Remove the existing bower_components folder.
rm -rf bower_components
Update the Polymer version in bower.json to the latest versions.
Component | Version
---------------------|--------
Polymer | ^2.0.0
webcomponentsjs | ^1.0.0
web-component-tester | ^6.0.0
Polymer elements | ^2.0.0
Install the new dependencies.
bower install
This did not solve the problem. However I could not update Polymer elements to ^2.0.0
bower.json
"dependencies" : {
...
"polymer-elements" : "^2.0.0",
...
}
caused an error and so did:
bower.json
"dependencies" : {
...
"polymerelements" : "^2.0.0",
...
}
and so did:
bower.json
"dependencies" : {
...
"PolymerElements" : "^2.0.0",
...
}
The solution proposed by #Ofisora in the comments works for me—update iron-selector and iron-meta:
bower install --save PolymerElements/iron-meta
bower install --save PolymerElements/iron-selector
iron-icons is a utility import that includes the definition for the
iron-icon element, iron-iconset-svg element, as well as an import
for the default icon set.
This means that iron-icons is directly dependent on both iron-icon and iron-iconset-svg. And both iron-icon and iron-iconset-svg element depends on iron-meta.
When you update iron-icons to the latest version, these elements iron-icon, iron-iconset-svg and iron-meta might not get updated since you will get all these components by default. So, updating iron-meta is one of the solution.
Also, when you install or update element in polymer you will see messages like:
Unable to find a suitable version for iron-icons, please choose one by
typing one of the numbers below:
Always choose the suitable or latest version depending on other element you have.
When finished updating or installing you will see a note like:
Please note that,
iron-iconset-svg#a47e824859 depends on iron-meta#2.0-preview which resolved to iron-meta#7404b31da3
iron-icon#1.0.13, iron-icon#1.0.13, iron-icon#1.0.13, iron-iconset-svg#1.1.2, iron-iconset-svg#1.1.2 depends on iron-meta#^1.0.0 which resolved to iron-meta#1.1.3
iron-icon#2.0.0, iron-iconset-svg#2.0.0 depends on iron-meta#1 - 2 which resolved to iron-meta#2.0.2
Make sure you read this and install/update dependencies required.
Note: In my case I had to update iron-selector as well since I was using iron-icon inside the iron-selector.

Polymer paper input only in shadow dom, not visible in browser

I'm brand new to polymer (2.0), so I was just practicing with a sample application. I wanted to create a basic 'login' screen with two paper input fields.
I'll show you what I have got so far.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./testing/login-page.html">
</head>
<body unresolved>
<login-page></login-page>
</body>
</html>
And my login-page.html, which is in a folder called 'testing'
<dom-module id="login-page">
<template>
<h2>Hello!</h2>
<paper-input label="test">test</paper-input>
</template>
<script>
Polymer({
is: 'login-page',
properties: {
prop1: {
type: String,
value: 'login-page',
},
}
});
</script>
</dom-module>
I have installed the paper-input using bower with the following command: bower install paper-input
Problem is, it's not showing up, but it is present in the shadow dom when I inspect the page. Everything in the h2 tag is showing up. Again, I'm brand new to polymer, so is there something I'm doing wrong?
If you are using Polymer 2.0 you need to download elements with #2.0-preview suffix.
In your case
bower i --save PolymerElements/paper-input#2.0-preview
and then import it in your page
<link rel="import" href="/bower_components/paper-input/paper-input.html">

Installing Jasmine failing

I'm trying to get Jasmine to work on my website. This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.1.3</title>
<link rel="stylesheet" type="text/css" href="/Content/css/jasmine.css" />
<script src="/Scripts/UnitTesting/boot.js"></script>
<script src="/Scripts/UnitTesting/jasmine-html.js"></script>
<script src="/Scripts/UnitTesting/jasmine.js"></script>
<!-- include source files here... -->
<!-- include spec files here... -->
<script src="/Scripts/UnitTesting/HelloWorldSpec.js"></script>
</head>
<body>
</body>
</html>
And HelloWorldSpec.js:
function helloWorld() {
return "Hello world!";
}
describe("Hello world", function () {
it("says hello", function () {
expect(helloWorld()).toEqual("Hello world!");
});
});
When I load this page, I get:
ReferenceError: jasmineRequire is not defined
ReferenceError: describe is not defined
I thought I got the reference to the JS files wrong. But when I look at the page source, and click on one of the js links, for example, "/Scripts/UnitTesting/boot.js", I see the source code, so it appears the files are loaded succesfully. What's going wrong here?
The boot.js file should be loaded after jasmine.js and jasmine-html.js Otherwise what would it boot? The correct order that you should include the files is:
jasmine.js
jasmine-html.js
boot.js
http://jasmine.github.io/2.0/boot.html
Starting with version 2.0, this file “boots” Jasmine, performing all of the necessary initialization before executing the loaded environment and all of a project’s specs. This file should be loaded after jasmine.js and jasmine_html.js, but before any project source files or spec files are loaded. Thus this file can also be used to customize Jasmine for a project.