Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

amp-script: Worker debug hooks, use upgrade() API #19006

Merged
merged 3 commits into from Nov 7, 2018
Merged

amp-script: Worker debug hooks, use upgrade() API #19006

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9533533
Initial commit for amp-script callback debugging.
Oct 22, 2018
ae81c7e
Update worker-dom to 0.2.0.
Nov 1, 2018
e3fb885
Fix dupe buttons in hello-world example.
Nov 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/amp-script/hello-world.amp.html
View file
Open in desktop
Expand Up @@ -18,6 +18,6 @@
<script async custom-template="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
</head>
<body>
<amp-script layout=container src="/examples/amp-script/hello-world.js"><div class="root"><button>prompt</button><button>prompt</button><button>prompt</button><button>prompt</button></div></amp-script>
<amp-script layout=container src="/examples/amp-script/hello-world.js"><div class="root"><button id="hello">Insert Hello World!</button><button id="amp-img">Insert amp-img</button><button id="script">Insert &lt;script&gt;</button><button id="img">Insert &lt;img&gt;</button></div></amp-script>
</body>
</html>
20 changes: 4 additions & 16 deletions examples/amp-script/hello-world.js
View file
Open in desktop
Expand Up @@ -14,26 +14,14 @@
* limitations under the License.
*/

const root = document.createElement('div');
root.className = "root";
document.body.appendChild(root);

function createButton(label, onClick) {
const btn = document.createElement('button');
const text = document.createTextNode(label);
btn.appendChild(text);
btn.addEventListener('click', onClick);
root.appendChild(btn);
}

createButton('Insert Hello World!', () => {
document.getElementById('hello').addEventListener('click', () => {
const el = document.createElement('h1');
el.textContent = 'Hello World!';
document.body.appendChild(el);
});

// <amp-img> should be allowed.
createButton('Insert amp-img', () => {
document.getElementById('amp-img').addEventListener('click', () => {
const el = document.createElement('amp-img');
el.setAttribute('width', '300');
el.setAttribute('height', '200');
Expand All @@ -42,13 +30,13 @@ createButton('Insert amp-img', () => {
});

// <script> should be sanitized.
createButton('Insert <script>', () => {
document.getElementById('script').addEventListener('click', () => {
const el = document.createElement('script');
document.body.appendChild(el);
});

// <img> should be sanitized.
createButton('Insert <img>', () => {
document.getElementById('img').addEventListener('click', () => {
const el = document.createElement('img');
document.body.appendChild(el);
});
25 changes: 17 additions & 8 deletions extensions/amp-script/0.1/amp-script.js
View file
Open in desktop
Expand Up @@ -19,13 +19,14 @@ import {addPurifyHooks, purifyConfig} from '../../../src/purifier';
import {
calculateExtensionScriptUrl,
} from '../../../src/service/extension-location';
import {dev, user} from '../../../src/log';
import {getMode} from '../../../src/mode';
import {isExperimentOn} from '../../../src/experiments';
import {
callbacks,
sanitizer,
upgradeElement,
upgrade,
} from '@ampproject/worker-dom/dist/unminified.index.safe.mjs.patched';
import {dev, user} from '../../../src/log';
import {getMode} from '../../../src/mode';
import {isExperimentOn} from '../../../src/experiments';

/** @const {string} */
const TAG = 'amp-script';
Expand Down Expand Up @@ -58,10 +59,18 @@ export class AmpScript extends AMP.BaseElement {
user().warn(TAG, 'Node was sanitized:', node);
},
});

const url = this.workerThreadUrl_();
dev().fine(TAG, 'Fetching amp-script-worker from:', url);
upgradeElement(this.element, url);
// Configure callbacks.
callbacks.onSendMessage = data => {
dev().info(TAG, 'To worker:', data);
};
callbacks.onReceiveMessage = data => {
dev().info(TAG, 'From worker:', data);
};
// Create worker and hydrate.
const authorUrl = this.element.getAttribute('src');
const workerUrl = this.workerThreadUrl_();
dev().info(TAG, 'Author URL:', authorUrl, ', worker URL:', workerUrl);
upgrade(this.element, authorUrl, workerUrl);
return Promise.resolve();
}

Expand Down
8 changes: 4 additions & 4 deletions gulpfile.js
View file
Open in desktop
Expand Up @@ -749,10 +749,10 @@ function buildExtensionJs(path, name, version, options) {
// Copy @ampproject/worker-dom/dist/worker.safe.js to the dist/ folder.
if (name === 'amp-script') {
// TODO(choumx): Compile this when worker-dom externs are available.
fs.copyFileSync('node_modules/@ampproject/worker-dom/dist/worker.safe.js',
`dist/v0/amp-script-worker-${version}.js`);
fs.copyFileSync('node_modules/@ampproject/worker-dom/dist/worker.safe.js',
`dist/v0/amp-script-worker-${version}.max.js`);
const dir = 'node_modules/@ampproject/worker-dom/dist/';
const file = `dist/v0/amp-script-worker-${version}`;
fs.copyFileSync(dir + 'worker.safe.js', `${file}.js`);
fs.copyFileSync(dir + 'unminified.worker.safe.js', `${file}.max.js`);
}
});
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -25,7 +25,7 @@
"preinstall": "node build-system/check-package-manager.js"
},
"dependencies": {
"@ampproject/worker-dom": "0.1.4",
"@ampproject/worker-dom": "0.2.0",
"document-register-element": "1.5.0",
"dompurify": "1.0.8",
"promise-pjs": "1.1.3",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -2,10 +2,10 @@
# yarn lockfile v1


"@ampproject/worker-dom@0.1.4":
version "0.1.4"
resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.1.4.tgz#db62bec216c99fa14e8f87138b1e7925a20a582b"
integrity sha512-0dgREzd48ae28j8J0aF3+pFGiLqLO0lI+84Ip000ZAjMUM2gFvd4KH1AzsqPkKx4/4IdJBtt3iQbTgsWjPdQ8Q==
"@ampproject/worker-dom@0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.2.0.tgz#77127cae9367479e51d85c18115702c8291a2dc7"
integrity sha512-w68ksoclM6VGPwETvvl5xASqpGRHzWeLGuyb0vQpOq5ta38h+iBYZF/weN3QwGKN1qCfZy5le73wlvDsXhc05A==
dependencies:
dompurify "1.0.8"

Expand Down