Skip to content

Instantly share code, notes, and snippets.

@Zoramite
Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Zoramite/6691765167bbe84a81ae to your computer and use it in GitHub Desktop.
Save Zoramite/6691765167bbe84a81ae to your computer and use it in GitHub Desktop.
CSP Errors in Chrome Packaged App from Dart Transformer
Example for the discussion on the CPA transformer bug.
https://groups.google.com/a/dartlang.org/d/topic/web/MvEeAN4cJLM/discussion
All files that do not start with pubspec should be moved to a web/ directory. Gist does not allow subdirectories.
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create('test_elements.html', {
'id': '_mainWindow',
'bounds': {
'width': Math.round(window.screen.availWidth * 0.85),
'height': Math.round(window.screen.availHeight * 0.85)
}
});
});
import 'package:polymer/polymer.dart';
import 'package:polymer_expressions/filter.dart';
import 'package:intl/intl.dart';
class StringToNum extends Transformer<String, num> {
final formatFixed = new NumberFormat('0.00');
String forward(num i) => formatFixed.format(i);
num reverse(String s) => num.parse(s);
}
/**
* A Polymer click counter element.
*/
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
final asNum = new StringToNum();
@published num count = 0;
ClickCounter.created() : super.created() {
}
}
<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
</style>
<div>
<input type="number" name="count" value="{{ count | asNum }}" step="0.01" min="0">
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
{
"name": "Test Elements",
"short_name": "Testing",
"version": "0.0.0.1",
"manifest_version": 2,
"icons": {"128": "Yeti.png"},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"description": "Testing frustrations.",
"author": "Randy Merrill",
"permissions": [
]
}
name: test_elements
description: A sample Polymer application
dependencies:
polymer: any
intl: any
polymer_expressions: any
chrome: any
transformers:
- polymer:
entry_points: web/test_elements.html
csp: true
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- include the web_components polyfills with support for Dart. -->
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<link rel="stylesheet" href="test_elements.css">
</head>
<body>
<h1>Test elements</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment