diff options
| author | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2021-01-21 19:04:05 +0300 |
|---|---|---|
| committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2021-01-21 21:03:47 +0300 |
| commit | c5fc81295eeef44487b8a0f62df38d0686f8a5e1 (patch) | |
| tree | 221181895e050043799befe40dacfb49ef251809 | |
| parent | 6f5ea7ba413d1b7e564a67b134695f7e12563f15 (diff) | |
Add React samplev0.7.0
| -rw-r--r-- | .gitignore | 6 | ||||
| -rw-r--r-- | assets/js/like.jsx | 27 | ||||
| -rw-r--r-- | assets/js/main.js | 2 | ||||
| -rw-r--r-- | assets/js/shims/react-dom.js | 1 | ||||
| -rw-r--r-- | assets/js/shims/react.js | 1 | ||||
| -rw-r--r-- | layouts/index.html | 67 | ||||
| -rw-r--r-- | package-lock.json | 52 | ||||
| -rw-r--r-- | package.json | 8 |
8 files changed, 137 insertions, 27 deletions
@@ -1,3 +1,5 @@ public/ -node_modules/date-fns/ -assets/jsconfig.json
\ No newline at end of file +assets/jsconfig.json +!node_modules/ +node_modules/* +!node_modules/mynodemod/
\ No newline at end of file diff --git a/assets/js/like.jsx b/assets/js/like.jsx new file mode 100644 index 0000000..d0ec61e --- /dev/null +++ b/assets/js/like.jsx @@ -0,0 +1,27 @@ +// Note: We're using the CDN in "production". +import * as React from 'react' +import * as ReactDOM from "react-dom"; + +// A simple React JSX component. +class LikeButton extends React.Component { + constructor(props) { + super(props); + this.state = { liked: false }; + } + + render() { + if (this.state.liked) { + return 'You liked this!'; + } + + return ( + <button onClick={() => this.setState({ liked: true }) }> + Like + </button> + ); + } + } + + +const domContainer = document.querySelector('#like_button_container'); +ReactDOM.render(<LikeButton />, domContainer);
\ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index afa9ea1..ac34ac9 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,4 +1,4 @@ -// From mod1, but hello1 get its data from mod2. +//// From mod1, but hello1 get its data from mod2. import { hello1, hello2 } from 'core/util'; // From mod2 import * as data from 'core/util/data.json'; diff --git a/assets/js/shims/react-dom.js b/assets/js/shims/react-dom.js new file mode 100644 index 0000000..2591e51 --- /dev/null +++ b/assets/js/shims/react-dom.js @@ -0,0 +1 @@ +export let ReactDOM = window.ReactDOM; diff --git a/assets/js/shims/react.js b/assets/js/shims/react.js new file mode 100644 index 0000000..705c323 --- /dev/null +++ b/assets/js/shims/react.js @@ -0,0 +1 @@ +export let React = window.React; diff --git a/layouts/index.html b/layouts/index.html index 02771af..d31e2c9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,24 +1,47 @@ <!doctype html> <html lang="en"> -<head> - <meta charset="utf-8"> - <title> - {{ .Title }} - </title> - {{ $js := resources.Get "js/main.js" | js.Build (dict "minify" false "params" (dict "myparam" "Hugo Rocks!") ) }} - <script src="{{ $js.RelPermalink }}"></script> - {{ partialCached "jslibs/alpinejs/script-src.html" "-" }} -</head> -<body class="mt-10"> -<div class="" x-data="{}"> - <ul> - <li x-text="hello1()"></li> - <li x-text="hello2()"></li> - <li x-text="hello3()"></li> - <li x-text="hello4()"></li> - <li x-text="hello6()"></li> - <li x-text="helloNodeModules()"></li> - <li x-text="data.Hugo"></li> - <li x-text="params.myparam"></li> - </ul> -</div>
\ No newline at end of file + <head> + <meta charset="utf-8"> + <title> + {{ .Title }} + </title> + {{ if hugo.IsProduction }} + {{/* We import from node_modules in development to get code completion etc. working. */}} + <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> + <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> + {{ end }} + {{ $js := resources.Get "js/main.js" | js.Build (dict "minify" false "params" (dict "myparam" "Hugo Rocks!") ) }} + <script src="{{ $js.RelPermalink }}"></script> + {{ partialCached "jslibs/alpinejs/script-src.html" "-" }} + </head> + <body class="mt-10"> + <h2> + Basic Test Cases + </h2> + <div class="" x-data="{}"> + <ul> + <li x-text="hello1()"></li> + <li x-text="hello2()"></li> + <li x-text="hello3()"></li> + <li x-text="hello4()"></li> + <li x-text="hello6()"></li> + <li x-text="helloNodeModules()"></li> + <li x-text="data.Hugo"></li> + <li x-text="params.myparam"></li> + </ul> + </div> + <h2> + React + </h2> + <div id="like_button_container"></div> + {{ $shims := dict }} + {{ $defines := dict }} + {{ if hugo.IsProduction }} + {{ $shims = dict "react" "js/shims/react.js" "react-dom" "js/shims/react-dom.js" }} + {{ else }} + {{ $defines = dict "process.env.NODE_ENV" `"development"` }} + {{ end }} + {{ $js := resources.Get "js/like.jsx" | js.Build (dict "shims" $shims "defines" $defines ) }} + <script src="{{ $js.RelPermalink }}"></script> + </body> +</html>
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index de6b150..551c6c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,58 @@ "version": "2.16.1", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, + "react": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", + "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-dom": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", + "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.1" + } + }, + "scheduler": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", + "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } } } } diff --git a/package.json b/package.json index ae9e50a..38f8456 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,14 @@ "devDependencies": {} }, "dependencies": { - "date-fns": "^2.16.1" + "date-fns": "^2.16.1", + "react": "^17.0.1", + "react-dom": "^17.0.1" }, "description": "Test project used for integration testing.", - "devDependencies": {}, + "devDependencies": { + + }, "homepage": "https://github.com/gohugoio/hugoTestProjectJSModImports#readme", "license": "ISC", "main": "index.js", |