I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
Related
what I found out =>
you can't import scripts from links inside chrome extension's background scripts or content scripts (basically anywhere inside new page HTML or popup HTML)
so you what you need to do is =>
<html lang="en">
<head>
<script src="./googleAnalytics.js"></script>
<script src="./googleAnalyticsStarter.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>
instead of =>
<html lang="en">
<head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-XXXXXXXX");
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app</noscript>
</body>
</html>
I'm starting to use Angular Material and a problem occur: I have this simple page, built with Angular Material, with a NavBar but it doesn't appear, and I don't know why.
This is my page:
<html lang="it">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="MyApp" ng-cloak>
<!-- NavBar -->
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<span>{{currentNavItem}}</span>
</md-content>
</div>
<!-- End NavBar -->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
angular.module('MyApp', ['ngMaterial']);
</script>
</body>
The result is a blank page.
Thanks for help!
There are many things you did wrong in this code. First use ng-app at only in body tag. You also tried to use it in div element so remove that.
You defined MyApp two times in your javascript so remove the last definition.
Remove material.svgAssetsCache import since it is not avaliable. and try to use the below code for in your angular javascript file.
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.currentNavItem = 'page1';
});
I have developed single page application using Angular 2, node , express. It is running fine on chrome and firefox. but same is now working on IE 11. Used following code
Giving error to System in script tag. SCRIPT5009: 'System' is undefined
<html class="ng-scope">
<head>
<base href="/"/>
<title>Test application</title>
<!-- 1. Load libraries -->
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.dev.js"></script>
<script src="libs/angular2/bundles/router.dev.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/bootstrap')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- End wrapper-->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
</body>
</html>
thanks in advance.
Finally I got the solution using following link.
I have added two javascript reference es6-shim.min.js and shims_for_IE.js
<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/systemjs/dist/system-polyfills.js"></script>
<script src="libs/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
https://github.com/angular/angular/issues/7144
Note : In this reference libs = node_modules
Try adding
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.js"></script>
as first script library
Thank you for reading.
I am stuck on passing information between my background.js and popup.html!
In this example, I am trying to call testRequest in background.js from popup.html. I have looked at dozens of examples of how to do this and coded as many solutions, but I have not been successful...this is one of the solutions I tried:
Popup.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="background.js">
$(document).ready(function () {
document.getElementById("test").textContent = chrome.extension.getBackgroundPage.testRequest();
});
</script>
<div id="test"></div>
</body>
</html>
background.js
var testRequest = function(){
return 'yay!';
}
Your help is greatly appreciated!
~Brian
You could use simple message passing to do this. For example:
Popup.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
popup.js
$(function() {
chrome.runtime.sendMessage({method:"testRequest"},function(reply){
$('#test').text(reply);
});
});
background.js
chrome.runtime.onMessage.addListener(function(message,sender,sendRepsonse){
if(message.method == "testRequest")
sendResponse(testRequest());
});
function testRequest(){
return "yay!";
}
Inline code is not allowed in popup.html so we move it all to an external file, you were using jQuery already so don't be afraid to use it more, and if you are using it, don't forget to include it.
So, I am trying to do a basic Google Chrome Hello World kind of extension. Can someone explain me why the below code doesn't work? Thanks.
popup.js:
document.getElementById("foobar").innerHTML = "Hello Chrome Extensions";
popup.html:
<!doctype html>
<html>
<head>
<title>Hello Chrome</title>
<script src="popup.js"></script>
<div id="foobar"></div>
</head>
<body>
</body>
</html>
I am following the "framework" of http://developer.chrome.com/extensions/getstarted.html.
It can be solved in two ways:
Swap the order of <script .. > and <div ..>.
Wrap the code in popup.js in a domready event:
document.addEventListener('DOMContentLoaded', function() {
// Code here...
});
Your code failed because the <div> was unknown at the time of executing the script.