Browse Source

Props and hot reload

master
Mattia Belletti 7 months ago
parent
commit
e9faf78ada
10 changed files with 173 additions and 22 deletions
  1. +1
    -1
      .babelrc
  2. +6
    -1
      package.json
  3. +2
    -1
      src/components/app.jsx
  4. +2
    -2
      src/components/audiograph/node.js
  5. +3
    -3
      src/components/audiograph/oscillator.js
  6. +1
    -1
      src/components/general.js
  7. +15
    -7
      src/components/properties.jsx
  8. +4
    -0
      src/components/properties.scss
  9. +22
    -3
      webpack.config.js
  10. +117
    -3
      yarn.lock

+ 1
- 1
.babelrc View File

@@ -1,4 +1,4 @@
{
"plugins": ["lodash"],
"plugins": ["lodash", "react-hot-loader/babel"],
"presets": ["@babel/env", "@babel/react"]
}

+ 6
- 1
package.json View File

@@ -5,7 +5,7 @@
"license": "MIT",
"scripts": {
"start": "webpack --mode development",
"dev": "webpack-dev-server --mode development",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
@@ -18,6 +18,7 @@
"babel-loader": "^8.0.6",
"babel-plugin-lodash": "^3.3.4",
"color": "^3.1.2",
"cross-env": "^7.0.1",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
@@ -33,6 +34,7 @@
"prettier": "^1.19.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-hot-loader": "^4.12.19",
"reactn": "^2.2.6",
"sass-loader": "^8.0.2",
"source-map-loader": "^0.2.4",
@@ -40,5 +42,8 @@
"webpack-cli": "^3.3.11",
"webpack-dev": "^1.1.1",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"@hot-loader/react-dom": "^16.12.0"
}
}

+ 2
- 1
src/components/app.jsx View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
import { hot } from "react-hot-loader/root";

import "./app.scss";
import Properties from "./properties";
@@ -201,4 +202,4 @@ const App = () => {
);
};

export default App;
export default hot(App);

+ 2
- 2
src/components/audiograph/node.js View File

@@ -30,7 +30,7 @@ const getMetadataSignature = m =>
* @property {string} name Name of the property
* @property {PropType} type Type of the property
* @property {AudioParamType} audioParamType Type of the audio param, if such ("none" if it's not)
* @property {any} initialValue Initial value of the property when created
* @property {any} value Initial value of the property when created
* @property {string[]} [enumValues] Possible values of the property, if `type === "enum"`
*/

@@ -40,7 +40,7 @@ const getMetadataSignature = m =>
*/
const getPropSignature = prop =>
`${prop.name}+${prop.type}+${prop.audioParamType}+${JSON.stringify(
prop.initialValue
prop.value
)}+${prop.enumValues ? prop.enumValues.join("*") : "X"}`;

/**


+ 3
- 3
src/components/audiograph/oscillator.js View File

@@ -17,7 +17,7 @@ export const createOscillator = graph => {
{
name: "frequency",
type: "number",
initialValue: 440,
value: 440,
audioParamType: "a-rate"
},
{
@@ -25,12 +25,12 @@ export const createOscillator = graph => {
type: "enum",
enumValues: ["sine", "square", "sawtooth", "triangle"],
audioParamType: "none",
initialValue: "sine"
value: "sine"
},
{
name: "detune",
type: "number",
initialValue: 0,
value: 0,
audioParamType: "a-rate"
}
],


+ 1
- 1
src/components/general.js View File

@@ -14,7 +14,7 @@ export const Prop = PropTypes.shape({
name: PropTypes.string.isRequired,
type: PropTypes.oneOf(["string", "number", "enum"]).isRequired,
audioParamType: PropTypes.oneOf(["a-rate", "k-rate", "none"]).isRequired,
initialValue: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
enumValues: PropTypes.arrayOf(PropTypes.string.isRequired)
});



+ 15
- 7
src/components/properties.jsx View File

@@ -22,16 +22,24 @@ const Properties = ({ selectedNode, onClose }) => {
>
{selectedNode && (
<div className={styles.data}>
<div style={{ color: title }}>Props</div>
<div className={styles.title} style={{ color: title }}>
Props
</div>
<button onClick={onClose}>Close</button>
{selectedNode.props.map(prop => (
<div key={prop.name}>
<label style={{ color: propName }}>{prop.name}</label>
<input
type="text"
style={{ color: propValue }}
value={prop.initialValue}
/>
{prop.type === "string" ? (
<>
<label style={{ color: propName }}>{prop.name}</label>
<input
type="text"
style={{ color: propValue }}
value={prop.value}
/>
</>
) : (
<></>
)}
</div>
))}
</div>


+ 4
- 0
src/components/properties.scss View File

@@ -9,6 +9,10 @@
padding-left: 0.5rem;
}

.title {
font-weight: bold;
}

.closed {
width: 0px;
}


+ 22
- 3
webpack.config.js View File

@@ -2,12 +2,26 @@ const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = process.env.NODE_ENV === "development";

console.log("isDev?", isDev, "NODE_ENV=", process.env.NODE_ENV);

module.exports = {
devtool: "source-map",
devServer: {
hot: true
},
resolve: {
extensions: [".js", ".jsx", ".scss", ".css"]
extensions: [".js", ".jsx", ".scss", ".css"],
alias: isDev
? {
"react-dom": "@hot-loader/react-dom"
}
: {}
},
entry: path.join(__dirname, "src", "index.js"),
entry: (isDev ? ["react-hot-loader/patch"] : []).concat([
path.join(__dirname, "src", "index.js")
]),
output: {
path: path.join(__dirname, "build"),
filename: "bundle.js"
@@ -30,7 +44,12 @@ module.exports = {
{
test: /.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev
}
},
{
loader: "css-loader",
options: {


+ 117
- 3
yarn.lock View File

@@ -825,6 +825,16 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"

"@hot-loader/react-dom@^16.12.0":
version "16.12.0"
resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.12.0.tgz#cd19598150ca9c482dc99f9389e1a60b341017f9"
integrity sha512-8OwYKD4tV/0VOEbIINKaawLZVgFlEWPTR2Z1zr6uGPO4NxJpJdXfFh9OM5rOmF/vO1+K1W26z3V19IPHJbhzuQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.18.0"

"@types/events@*":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -2090,6 +2100,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"

cross-env@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.1.tgz#c8e03412ea0e1370fe3f0066929a70b8e1e90c39"
integrity sha512-1+DmLosu38kC4s1H4HzNkcolwdANifu9+5bE6uKQCV4L6jvVdV9qdRAk8vV3GoWRe0x4z+K2fFhgoDMqwNsPqQ==
dependencies:
cross-spawn "^7.0.1"

cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -2109,6 +2126,15 @@ cross-spawn@^3.0.0:
lru-cache "^4.0.1"
which "^1.2.9"

cross-spawn@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
dependencies:
path-key "^3.1.0"
shebang-command "^2.0.0"
which "^2.0.1"

crypto-browserify@^3.11.0:
version "3.12.0"
resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -2435,6 +2461,11 @@ dom-serializer@0:
domelementtype "^2.0.1"
entities "^2.0.0"

dom-walk@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=

domain-browser@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -2973,7 +3004,7 @@ fast-json-stable-stringify@^2.0.0:
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==

fast-levenshtein@~2.0.6:
fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -3409,6 +3440,14 @@ global-prefix@^3.0.0:
kind-of "^6.0.2"
which "^1.3.1"

global@^4.3.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
dependencies:
min-document "^2.19.0"
process "^0.11.10"

globals@^11.1.0:
version "11.12.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -3588,6 +3627,13 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"

hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"

homedir-polyfill@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -4639,6 +4685,13 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==

min-document@^2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
dependencies:
dom-walk "^0.1.0"

mini-css-extract-plugin@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
@@ -5318,6 +5371,11 @@ path-key@^2.0.0, path-key@^2.0.1:
resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=

path-key@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==

path-parse@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -5524,7 +5582,7 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=

prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5686,11 +5744,30 @@ react-dom@^16.13.0:
prop-types "^15.6.2"
scheduler "^0.19.0"

react-is@^16.8.1:
react-hot-loader@^4.12.19:
version "4.12.19"
resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.19.tgz#99a1c763352828f404fa51cd887c5e16bb5b74d1"
integrity sha512-p8AnA4QE2GtrvkdmqnKrEiijtVlqdTIDCHZOwItkI9kW51bt5XnQ/4Anz8giiWf9kqBpEQwsmnChDCAFBRyR/Q==
dependencies:
fast-levenshtein "^2.0.6"
global "^4.3.0"
hoist-non-react-statics "^3.3.0"
loader-utils "^1.1.0"
prop-types "^15.6.1"
react-lifecycles-compat "^3.0.4"
shallowequal "^1.1.0"
source-map "^0.7.3"

react-is@^16.7.0, react-is@^16.8.1:
version "16.13.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==

react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

react@^16.13.0:
version "16.13.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
@@ -6065,6 +6142,14 @@ sass-loader@^8.0.2:
schema-utils "^2.6.1"
semver "^6.3.0"

scheduler@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

scheduler@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d"
@@ -6229,6 +6314,11 @@ shallow-clone@^3.0.0:
dependencies:
kind-of "^6.0.2"

shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==

shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -6236,11 +6326,23 @@ shebang-command@^1.2.0:
dependencies:
shebang-regex "^1.0.0"

shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
dependencies:
shebang-regex "^3.0.0"

shebang-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=

shebang-regex@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==

side-channel@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
@@ -6381,6 +6483,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

source-map@^0.7.3:
version "0.7.3"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==

spdx-correct@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -7308,6 +7415,13 @@ which@1, which@^1.2.14, which@^1.2.9, which@^1.3.1:
dependencies:
isexe "^2.0.0"

which@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
dependencies:
isexe "^2.0.0"

wide-align@^1.1.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"


Loading…
Cancel
Save