zouhir

<!-- container with specific styles -->
<div class="container">
  <script async src="cdn.../hello-widget.js"> </script>
</div>

zouhir

import { h, render, Component } from "preact";

class HelloWidget extends Component {
  render() {
    let time = new Date().toLocaleTimeString();
    let name = this.props.name || "nobody";
    return <h1>{`Hello ${name}, time is: ${time}`}</h1>;
  }
}

zouhir

import { h, Component } from "preact";
import habitat from "preact-habitat";

class HelloWidget extends Component {
  render() {
    let time = new Date().toLocaleTimeString();
    let name = this.props.name || "nobody";
    return <h1>{`Hello ${name}, time is: ${time}`}</h1>;
  }
}

zouhir

<!-- print it as -->
<h1><%= htmlWebpackPlugin.options.SOME_VAR %></h1>

zouhir

// add this please
// add this please
require("preact-cli/lib/lib/webpack/polyfills");
// look above

import { h } from "preact";
import habitat from "preact-habitat";

import Widget from "./components/hello-world";

zouhir

#### Step1:

In app entry, comment `registerServiceWorker()`

#### Step2:

Your service worker file is supposed to be in: `https://yourdomain.com/service-worker.js` and this file is never 
chacehd at yoyr users computer for offline use. 

so after commenting the `registerServiceWorker` in your CRA app entry, the 

zouhir

#### Step1:

In app entry, comment `registerServiceWorker()`

#### Step2:

Your service worker file is supposed to be in: `https://yourdomain.com/service-worker.js` and this file is never 
chacehd at yoyr users computer for offline use. 

so after commenting the `registerServiceWorker` in your CRA app entry, the 

zouhir

import de.voidplus.leapmotion.Bone;
import de.voidplus.leapmotion.Arm;
import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup(){
  size(displayWidth, displayHeight, P3D);
  background(255);
  

zouhir

void polygon(int sideCount, float radius) {

  float theta = 0.0;
  float x = 0.0;
  float y = 0.0;
  float R = random(255);
  float G = random (255);
  float B = random (255);
  
  beginShape();

zouhir

import Widget from './widget.jsx';
import habitat from 'react-new-tyson-module';


const widgetInAem = habitat(Widget);
widgetInAem.render({
  selector: '.booking-widget', // you can also use id #widgetId or data attribute [data-attribute-widget="mny-widget"]
  inline: false, //optional
  clean: false, //optional cleans the loading div or anything in the DOM after we mounr
  clientSpecified: false //optional