Stackblitz demos for 3.x elements #2537

e111077 · 2018-04-25T23:01:40Z

The commit messages might be helpful to follow for review here.

What I've done:

I added inline demos for 3.0. It uses stackblitz. See gif at the bottom of this PR for example

I installed the stackblitz sdk
~~added the generate-stackblitz npm command which copies it from node modules to a servable folder in the postinstall~~
created a stack-blitz element
- API is basically <stack-blitz projectPath="/path/to/project"></stack-blitz>
- There may be some vestigial features on the element
I updated the demo-tabs element to implement stack-blitz
- it can detect if it is a plunkr-style demo or a stackblitz-style demo
- It still displays static content to reduce unnecessary data usage
- stack-blitz is lazy loaded
- It functions exactly the same as before for our current 1.0 and `2.0 examples
I made the gulpfile copy all the demo files to the dist folder
I updated the 3.0 docs to use this new stackblitz demo tabs
I updated the 3.0 samples to use the manifest

Usage:

Create a sample folder
1. Add your files
2. Must include an index.html and an index.js
3. Files must be included in a manifest.json at the root of that folder
  1. API of manifest json is { files: string[], dependencies: { [npmDepName: string]: string }}
Create a demo tabs element
1. Usage is the same as before
2. Instead of adding a src which was used for plunkr links, use projectPath which is the path to the sample folder you just created (e.g. /3.0/samples/custom-element)
3. optional: define an editorOpenFile to declare what file will be shown upon editor embed

Performance

3.0 quick-tour Chrome with service worker and cache on

first time page load

test	new	old	change	explanation
page load	662kb	1mb	down	removed iframe demo
opening single editor	3.7mb	1mb	up	cannot be service-worked only cached
opening all editors	3.8mb	1mb	up	editor static files cached

subsequent page load

test	new	old	change	explanation
page load	147kb	160kb	down	removed iframe demo
opening single editor	156kb	160kb	down	editor cached
opening all editors	227kb	160kb	up	editor static files cached

Lighthouse

Lighthouse score went up to high 60s from low 60s as we removed the iframe demos and lazy load the editor.

Outstanding issues

Critical

~~Importing an element that uses polymer-legacy.js causes compile error Cannot read property 'end' of undefined stackblitz/core#441~~
import.meta support import.meta support stackblitz/core#378 (to be fixed in end of May)

Nice to have

cannot use non-blocking webcomponents-loader.js Parse error for Polymer 3.0.0-pre.12 stackblitz/core#363
~~write node_modules instead of turbo_modules Install dependencies into node_modules, not turbo_modules stackblitz/core#333~~
editing a webcomponent's file causes an element registry error if editor preview is not reloaded CustomElementRegistry not being wiped on hot reload stackblitz/core#416

Demo

Try it out! Link

keanulee

Do you have a sample deployment? Maybe @arthurevans or @katejeffreys should try the gulp/deploy process?

keanulee · 2018-04-25T23:22:49Z

app/elements/demo-tabs.html

    },

-    // Call out to a global method defined by app.js
-    _plunkerLaunched: function() {
+    _hideEditorButton: function(srcDefined, prjoectPathDefined) {


_hideEditorButton is a method AND a property?

keanulee · 2018-04-25T23:23:37Z

app/elements/demo-tabs.html

+
+      _isStackBlitz: {
+        type: Boolean,
+      },


_isPlunkr and _isStackBlitz unused

ah I forgot to rename srcDefined to this etc.

keanulee · 2018-04-25T23:25:51Z

app/elements/demo-tabs.html

-      return (!src || src === '');
+    _srcProjectPathChanged: function(src, projectPath) {
+      this._srcDefined = !!this.src;
+      this._projectPathDefined = !!this.projectPath;


Feel like _srcDefined and _projectPathDefined aren't needed since they're just proxies for src/projectPath

In the process of removing them, but I'm going to need one that is of type boolean as the databinding will not work if I try

<div hidden$=[[!stringThatIsUndefined]]>

keanulee · 2018-04-25T23:27:29Z

app/elements/stack-blitz.html

@@ -0,0 +1,186 @@
+<link rel="import" href="./stack-blitz-sdk.html">


stack-blitz-sdk.html doesn't need to exist (not used elsewhere so doesn't need to be de-duped) - just have <script src="../js/sdk.umd.js"></script> here

keanulee · 2018-04-25T23:31:24Z

app/elements/demo-tabs.html

+        }.bind(this)).catch(onError);
+      }.bind(this);
+
+      this.importHref('/elements/stack-blitz.html', onLoad, onError, true);


changes implemented

EricSimons · 2018-04-25T23:50:01Z

Hey everyone- StackBlitz co-creator here! Super excited to see this PR :)

Just wanted to give y'all an update on the ETA for the various items outlined above from our end. With ngconf done and our Teleport feature out the door, we're finally able to focus on the next version of our bundler/dev server which solves all the 'critical' & 'nice to have' items. Specifically, we're going to enable serving the static JS files themselves without any transpilation done beforehand.

We're realistically shooting to have this live on prod in ~4 weeks- would love to hear everyone's thoughts/if there's func in polymer CLI that'd be ideal to have on StackBlitz as well 🥂

e111077 · 2018-04-26T00:06:00Z

@EricSimons TBH it's miraculous that bare module specifiers work out of the box for ES6 modules with no additional tooling.

There is nothing really polymer-cli-specific that I can think of atm, but there are a few rough patches that we've been filing issues for. Perhaps we can sync up later sometime in VC to discuss this further?

CC @justinfagnani

EricSimons · 2018-04-26T00:12:18Z

Sounds good! My email is eric at esft.com, so feel free to drop me a note and we'll get something on the calendar 👍

ghost · 2018-04-26T06:58:27Z

\o/ i will try to review this Thursday 26th

keanulee · 2018-04-26T21:38:15Z

package.json

@@ -7,7 +7,8 @@
    "node": ">=5.0.0"
  },
  "scripts": {
-    "postinstall": "bower install; gulp",
+    "postinstall": "bower install; npm run generate-stackblitz; gulp",
+    "generate-stackblitz": "cp ./node_modules/@stackblitz/sdk/bundles/sdk.umd.js ./app/js/sdk.umd.js; cp ./node_modules/@stackblitz/sdk/bundles/sdk.umd.js.map ./app/js/sdk.umd.js.map;",


Can we use a hosted version of the SDK instead? Not a huge fan of this one-off, manual copying from node_modules/.

<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>

(referenced https://medium.com/@ericsimons/stackblitz-sdk-instantly-add-live-environments-to-your-docs-blogs-more-73dab05c51ae)

Sure, I'll just need to add this to the service worker

spoke offline, decided it's best not to add SW

keanulee · 2018-04-26T21:38:32Z

.gitignore

 dist
 build

 # Dev directories
 /app/bower_components
 /node_modules
+/app/node_modules


Don't think this is created.

e111077 · 2018-04-26T21:52:08Z

@keanulee Here it is staged: https://stack-blitz-dot-polymer-project.appspot.com/3.0/start/quick-tour

keanulee · 2018-04-26T22:06:11Z

package.json

@@ -22,6 +22,7 @@
  },
  "homepage": "https://www.polymer-project.org/1.0/",
  "devDependencies": {
+    "@stackblitz/sdk": "^1.1.1",


Reset this file and package-lock.json

keanulee · 2018-04-26T22:06:37Z

.gitignore

@@ -3,6 +3,7 @@
 # Generated files/folders
 *.pyc
 app/css/*
+app/js/sdk*


Remove this

keanulee · 2018-04-26T22:10:19Z

app/elements/stack-blitz.html

@@ -0,0 +1,187 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>


Pin unpkg to a specific version to avoid breakages/extra redirect https://unpkg.com/@stackblitz/[email protected]/bundles/sdk.umd.js

keanulee · 2018-04-26T22:41:27Z

gulpfile.js

@@ -251,6 +251,7 @@ gulp.task('jshint', 'Lint JS', function() {
  return gulp.src([
      'gruntfile.js',
      'app/js/**/*.js',
+      '!app/js/**/sdk*',


argh, one more thing to remove

I'm just testing you... you pass

keanulee

Code changes LGTM. Will defer to @arthurevans and/or @katejeffreys to test on their machines as well.

ghost

Tested, works beautifully on my machine. Thank you so much for this!!

Elliott Marquez added 7 commits April 25, 2018 14:08

move stackblitz sdk to accessible location

8401dde

ignore sdk

09ed36f

stackblitz element

9e12e9d

demo-tabs can detect whether stackblitz or plunkr

8e1c4e9

gulpfile will copy new files to dist

c192eef

update docs and projects

3da5fd3

make demos show for jsbin demos

5152cd5

e111077 requested review from justinfagnani, arthurevans, keanulee and a user April 25, 2018 23:01

googlebot added the cla: yes label Apr 25, 2018

e111077 changed the title ~~Stack blitz demos for 3.x elements~~ Stackblitz demos for 3.x elements Apr 25, 2018

keanulee suggested changes Apr 25, 2018

View reviewed changes

Elliott Marquez added 2 commits April 25, 2018 16:49

clean up demo-tabs props and fns

7076a66

include stackblitz sdk directly

bf1581e

e111077 mentioned this pull request Apr 26, 2018

Support 'import.meta' microsoft/TypeScript#23327

Merged

ghost self-assigned this Apr 26, 2018

keanulee suggested changes Apr 26, 2018

View reviewed changes

Elliott Marquez added 2 commits April 26, 2018 14:59

remoced gitignore for non-existent dir

d65e5e6

removed local stackblitz sdk

e10b97d

keanulee suggested changes Apr 26, 2018

View reviewed changes

removed stackblitz sdk from deps and pinned to version

4b14db5

keanulee reviewed Apr 26, 2018

View reviewed changes

remove extraneous gulp target

f8ddfc4

keanulee approved these changes Apr 27, 2018

View reviewed changes

turbo_modules -> node_modules

f013d65

ghost approved these changes Apr 28, 2018

View reviewed changes

e111077 merged commit 36248de into master Apr 28, 2018

e111077 deleted the stack-blitz branch April 28, 2018 00:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stackblitz demos for 3.x elements #2537

Stackblitz demos for 3.x elements #2537

e111077 commented Apr 25, 2018 •

edited

Loading

keanulee left a comment

keanulee Apr 25, 2018

e111077 Apr 25, 2018

keanulee Apr 25, 2018

e111077 Apr 25, 2018

keanulee Apr 25, 2018

e111077 Apr 25, 2018

keanulee Apr 25, 2018

keanulee Apr 25, 2018

e111077 Apr 26, 2018

EricSimons commented Apr 25, 2018

e111077 commented Apr 26, 2018

EricSimons commented Apr 26, 2018

ghost commented Apr 26, 2018

keanulee Apr 26, 2018 •

edited

Loading

e111077 Apr 26, 2018

e111077 Apr 26, 2018

keanulee Apr 26, 2018

e111077 commented Apr 26, 2018

keanulee Apr 26, 2018

keanulee Apr 26, 2018

keanulee Apr 26, 2018

keanulee Apr 26, 2018

e111077 Apr 26, 2018

keanulee left a comment

ghost left a comment

		@@ -0,0 +1,186 @@
		<link rel="import" href="./stack-blitz-sdk.html">

		@@ -0,0 +1,187 @@
		<link rel="import" href="../bower_components/polymer/polymer.html">

		<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>

Stackblitz demos for 3.x elements #2537

Stackblitz demos for 3.x elements #2537

Conversation

e111077 commented Apr 25, 2018 • edited Loading

What I've done:

Usage:

Performance

first time page load

subsequent page load

Lighthouse

Outstanding issues

Demo

keanulee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EricSimons commented Apr 25, 2018

e111077 commented Apr 26, 2018

EricSimons commented Apr 26, 2018

ghost commented Apr 26, 2018

keanulee Apr 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

e111077 commented Apr 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keanulee left a comment

Choose a reason for hiding this comment

ghost left a comment

Choose a reason for hiding this comment

e111077 commented Apr 25, 2018 •

edited

Loading

keanulee Apr 26, 2018 •

edited

Loading