[ { "path": ".gitbook.yaml", "content": "root: ./docs/\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: nick-thompson\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".github/workflows/cmake.yml", "content": "name: CMake\n\non: [push, pull_request]\n\nenv:\n # Customize the CMake build type here (Release, Debug, RelWithDebInfo, etc.)\n BUILD_TYPE: Release\n\njobs:\n build:\n runs-on: ${{ matrix.os }}\n strategy:\n matrix:\n os: [macos-latest, ubuntu-latest, windows-latest]\n\n steps:\n - uses: actions/checkout@v2\n with:\n submodules: true\n\n - name: Fetch juce dependencies\n if: matrix.os == 'ubuntu-latest'\n run: sudo apt-get update && sudo apt-get install libx11-dev libxrandr-dev libxinerama-dev libxcursor-dev libxext-dev libfreetype6-dev libasound2-dev\n\n - name: Create Build Environment\n # Some projects don't allow in-source building, so create a separate build directory\n # We'll use this as our working directory for all subsequent commands\n run: cmake -E make_directory ${{runner.workspace}}/build\n\n - name: Configure CMake\n # Use a bash shell so we can use the same syntax for environment variable\n # access regardless of the host operating system\n shell: bash\n working-directory: ${{runner.workspace}}/build\n # Note the current convention is to use the -S and -B options here to specify source\n # and build directories, but this is only available with CMake 3.13 and higher.\n # The CMake binaries on the Github Actions machines are (as of this writing) 3.12\n run: cmake $GITHUB_WORKSPACE -DCMAKE_BUILD_TYPE=$BUILD_TYPE\n\n - name: Build\n working-directory: ${{runner.workspace}}/build\n shell: bash\n # Execute the build. You can specify a specific target with \"--target \"\n run: cmake --build . --config $BUILD_TYPE\n" }, { "path": ".github/workflows/lint.yml", "content": "name: Lint\n\non: [push, pull_request]\n\njobs:\n run-linters:\n name: Run linters\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n - uses: bahmutov/npm-install@v1\n - name: Lint\n run: npm run lint\n" }, { "path": ".github/workflows/node.yml", "content": "name: Node.js\n\non: [push, pull_request]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n\n - name: Setup Node.js\n uses: actions/setup-node@v1\n with:\n node-version: \"12.x\"\n registry-url: \"https://npm.pkg.github.com\"\n\n - name: Install dependencies\n working-directory: ${{runner.workspace}}/react-juce/packages/react-juce\n run: npm ci\n\n - name: Build react-juce\n working-directory: ${{runner.workspace}}/react-juce/packages/react-juce\n run: npm run build\n" }, { "path": ".github/workflows/publish.yml", "content": "name: Publish Packages\n\non:\n release:\n types: [created]\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n\n - uses: actions/setup-node@v1\n with:\n node-version: \"12.x\"\n registry-url: \"https://registry.npmjs.org\"\n\n - name: Install dependencies\n working-directory: ${{runner.workspace}}/react-juce/packages/react-juce\n run: npm ci\n\n - name: Build react-juce\n working-directory: ${{runner.workspace}}/react-juce/packages/react-juce\n run: npm run build\n\n - name: Publish\n working-directory: ${{runner.workspace}}/react-juce/packages/react-juce\n run: npm publish\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}\n" }, { "path": ".gitignore", "content": "# Compiled object files\n*.slo\n*.lo\n*.o\n*.obj\n*.tlog\n*.log\n\n.vscode/\n.cache/\n\nbuild\nexamples/TestRunner/Builds\nexamples/**/build\n\n# For VSCode users\n*.code-workspace\n\n# For JetBrains users\n.idea\n\n# For vim users\n*.swp\n\n._*\n*.mode1v3\n*.pbxuser\n*.perspectivev3\n*.user\n*.ncb\n*.suo\n*.ilk\n*.pch\n*.pdb\n*.dep\n*.idb\n*.manifest\n*.manifest.res\n*.o\n*.d\n*.sdf\n*.opensdf\n*.VC.db\n*.VC.opendb\nxcuserdata\nxcshareddata\n*.xccheckout\n*.xcscmblueprint\ncontents.xcworkspacedata\n.DS_Store\n.svn\n.deps\n.dirstamp\nprofile\nnode_modules\n**/MacOSX/build\n**/iOS/build\n**/IDEWorkspaceChecks.plist\n**/Linux/build\n**/LinuxMakefile/build\n**/VisualStudio2005/Debug\n**/VisualStudio2005/Release\n**/VisualStudio2008/Debug\n**/VisualStudio2008/Release\n**/VisualStudio2010/Debug\n**/VisualStudio2010/Release\n**/VisualStudio2012/Debug\n**/VisualStudio2012/Release\n**/VisualStudio2013/Win32\n**/VisualStudio2013/x64\n**/VisualStudio2015/Win32\n**/VisualStudio2015/x64\n**/VisualStudio2017/Win32\n**/VisualStudio2017/x64\n**/Builds/x64\n**/.vs\n**/CodeBlocks/bin\n**/CodeBlocks/obj\n**/CodeBlocks/*.depend\n**/CodeBlocks/*.layout\n**/Builds/Android/.gradle\n**/Builds/Android/.idea\n**/Builds/Android/build\n**/Builds/Android/**/*.iml\n**/Builds/Android/local.properties\n**/Builds/Android/app/build\n**/Builds/Android/app/.externalNativeBuild\n**/Builds/Android/lib/build\n**/Builds/Android/lib/.externalNativeBuild\n**/Builds/CLion/cmake-build-*\n**/Builds/CLion/.idea\n**/doxygen/doc\n**/doxygen/build\nextras/Projucer/JUCECompileEngine.dylib\n**/AAX_SDK_2p3p1/Libs/*.build\n**/AAX_SDK_2p3p1/Libs/AAXLibrary/WinBuild/**/int\n**/AAX_SDK_2p3p1/Libs/Debug\n**/AAX_SDK_2p3p1/Libs/Release\n**/AAX_SDK_2p3p1/Documentation\n" }, { "path": ".gitmodules", "content": "[submodule \"juce\"]\n\tpath = ext/juce\n\turl = ../../juce-framework/JUCE.git\n[submodule \"yoga\"]\n\tpath = react_juce/yoga\n\turl = ../../facebook/yoga.git\n[submodule \"react_juce/hermes\"]\n\tpath = react_juce/hermes\n\turl = ../../facebook/hermes.git\n" }, { "path": ".prettierignore", "content": "react_juce\nbuild\ndist\next\njuce\n" }, { "path": "CMakeLists.txt", "content": "cmake_minimum_required(VERSION 3.15)\nproject(reactjuce VERSION 0.1.0)\n\n# Change this option to ON if you want to build the AudioPluginHost for example\n# (practical to debug the plugin processor directly from your IDE)\noption(JUCE_BUILD_EXTRAS \"Build JUCE Extras\" OFF)\n\n\n# Change this option to set the JS Interpreter/Engine you wish to run React-JUCE against.\nset(REACTJUCE_JS_LIBRARY DUKTAPE CACHE STRING \"The JS Engine to use: either HERMES or DUKTAPE\")\n\n\nadd_subdirectory(ext/juce)\n\n# Adding any custom modules you might have:\njuce_add_module(react_juce)\n\n# Setup the JS engine/interpreter to use.\nif (REACTJUCE_JS_LIBRARY STREQUAL \"HERMES\")\n add_subdirectory(react_juce/hermes)\n\n target_compile_definitions(\n react_juce\n INTERFACE\n REACTJUCE_USE_HERMES=1\n )\n\n #TODO: We should be able to remove this include bloc once the following PR is merged\n # over at hermes upstream: https://github.com/facebook/hermes/pull/454\n target_include_directories(\n react_juce\n INTERFACE\n react_juce/hermes/API/\n react_juce/hermes/public/\n )\n\n target_link_libraries(\n react_juce\n INTERFACE\n hermesapi\n )\nelseif (REACTJUCE_JS_LIBRARY STREQUAL \"QUICKJS\")\n #TODO: Add QuickJS cmake settings/includes here.\nelseif (REACTJUCE_JS_LIBRARY STREQUAL \"DUKTAPE\")\n target_compile_definitions(\n react_juce\n INTERFACE\n REACTJUCE_USE_DUKTAPE=1\n )\nendif()\n\n# If you want to create new projects, you can init them in the examples folder\n# and add them here with the add_subdirectory command\nadd_subdirectory(examples/GainPlugin)\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nWe'd love to see you get involved with React-JUCE! Here are our current working guidelines, and we'll be updating and iterating on these as we go.\n\n- Have a question? Please open a Discussion topic, not an issue\n- Document every feature request, bugfix, or change with an issue\n- Issues that have been assigned to someone should be considered \"in progress\"\n- Issues with no assignee are free to claim. Please assign yourself if you want to tackle an issue to prevent duplicate efforts\n- If you don't see an issue for some work you're planning, open one so that we can mark an assignee and further avoid duplication\n- Priority will be established by way of labels\n- Timelines will be established by way of milestones\n\n# Style Guide\n\nFor javascript, typescript, markdown and yaml we enforce default [prettier](https://prettier.io/) formatting via a pipeline check. You can set up your IDE to format automatically, instantiate our formatting pre-commit hook by running `npm i && npx husky install` in the top-level directory, or ad-hoc by running `npm run beautify`.\n\nOn the C++ side, we don't yet have a coding style guideline, so please try to adhere to the style you see in the codebase. We will aim to get some tooling involved\nsoon to ameliorate that situation!\n\n## Thank you\n\n:pray: :heart: :rocket:\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) [2019] [Nicholas Thompson]\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# React-JUCE\n\n> Write cross-platform native apps with React.js and JUCE\n\nReact-JUCE (formerly named Blueprint) is a hybrid JavaScript/C++ framework that enables a [React.js](https://reactjs.org/) frontend for a [JUCE](http://juce.com/) application or plugin. It provides an embedded, ES5 JavaScript engine via [Duktape](http://duktape.org/), native hooks for rendering the React component tree to `juce::Component` instances, and a flexbox layout engine via [Yoga](https://yogalayout.com/).\n\nFor more information, see the introductory blog post here: [Blueprint: A JUCE Rendering Backend for React.js](https://nickwritesablog.com/blueprint-a-juce-rendering-backend-for-react-js)\n\n## Status\n\n**Approaching Beta**. We hope to announce a beta release in the coming weeks, after which we will aim our focus at stability and completeness on the path\nto a 1.0 release.\n\n**Anticipated Breaking Changes**\n\n- We'll be renaming Blueprint to react-juce before beta (#34)\n- ~~Updating the examples and `npm init` template to point to npm instead of the local package~~\n- ~~`ReactApplicationRoot::evaluate` and `ReactApplicationRoot::evaluateFile` (#115)~~\n- ~~Refactoring the hot reloader and decoupling the EcmascriptEngine from ReactApplicationRoot (#65)~~\n\n## Resources\n\n- Documentation: [Docs & Getting Started](https://docs.react-juce.dev)\n- Discussions: [GitHub Discussions](https://github.com/nick-thompson/react-juce/discussions)\n- Community: [The Audio Programmer Discord Server](https://discord.gg/3H4wwVf49v)\n - Join the `#blueprint` channel and say hi!\n\n## Maintainers\n\n- [@nick-thompson](https://github.com/nick-thompson)\n- [@joshmarler](https://github.com/JoshMarler)\n\n## Examples\n\nReact-JUCE is a young project, but already it provides the framework on which the entire user interface for [Creative Intent's Remnant](https://www.creativeintent.co/product/remnant) plugin is built.\n\n![Creative Intent Remnant: Screenshot](https://github.com/nick-thompson/react-juce/blob/master/RemnantScreenShot.jpg)\n\nBesides that, you can check out the example code in the `examples/` directory. See the \"Documentation\" section\nbelow for building and running the demo plugin. If you have a project written with React-JUCE that you want to share, get in touch! I would\nlove to showcase your work.\n\n## Contributing\n\nSee [CONTRIBUTING.md](https://github.com/nick-thompson/react-juce/blob/master/CONTRIBUTING.md)\n\n## License\n\nSee [LICENSE.md](https://github.com/nick-thompson/react-juce/blob/master/LICENSE.md)\n" }, { "path": "docs/.nojekyll", "content": "" }, { "path": "docs/README.md", "content": "# Introduction\n\nReact-JUCE is a hybrid JavaScript/C++ framework that enables a [React.js](https://reactjs.org/) frontend for a [JUCE](http://juce.com/) application or plugin. It provides an embedded, ECMAScript-compliant JavaScript engine via [Duktape](http://duktape.org/), native hooks for rendering the React component tree via `juce::Component` instances, and a flexbox layout engine via [Yoga](https://yogalayout.com/).\n\nFor more information, see the introductory blog post here: [React-JUCE: A JUCE Rendering Backend for React.js](https://nickwritesablog.com/blueprint-a-juce-rendering-backend-for-react-js)\n\n## Examples\n\nReact-JUCE is a young project, but already it provides the framework on which the entire user interface for [Creative Intent's Remnant](https://www.creativeintent.co/product/remnant) plugin is built.\n\n![Creative Intent Remnant: Screenshot](_media/RemnantScreenShot.jpg)\n\nBesides that, you can check out the example code in the `examples/` directory. See the \"Documentation\" section\nbelow for building and running the demo plugin. If you have a project written with React-JUCE that you want to share, get in touch! I would\nlove to showcase your work.\n\n## Contributing\n\nYes, please! I would be very happy to welcome your involvement. Take a look at the [open issues](https://github.com/nick-thompson/react-juce/issues)\nor the [project tracker](https://github.com/nick-thompson/react-juce/projects/1) to see if there's outstanding work that you might\nbe able to get started. Or feel free to propose an idea or offer feedback by [opening an issue](https://github.com/nick-thompson/react-juce/issues/new) as well.\n\nI don't have a formal style guide at the moment, so please try to match the present formatting in any code contributions.\n\n## License\n\nSee [LICENSE.md](https://github.com/nick-thompson/react-juce/blob/master/LICENSE.md)\n" }, { "path": "docs/Resources.md", "content": "# Resources\n\n- [Introductory Blog Post](https://nickwritesablog.com/blueprint-a-juce-rendering-backend-for-react-js/)\n- [The Audio Programmer Podcast](http://img.youtube.com/vi/GOuFg773eCM/0.jpg)\n - [![The Audio Programmer Podcast](http://img.youtube.com/vi/GOuFg773eCM/0.jpg)](https://www.youtube.com/watch?v=GOuFg773eCM)\n- [ADC 2019 Blueprint: rendering React.js to JUCE](https://www.youtube.com/watch?v=51pdMfGU-4g)\n - [![ADC 2019 Blueprint: rendering React.js to JUCE](https://img.youtube.com/vi/51pdMfGU-4g/0.jpg)](https://www.youtube.com/watch?v=51pdMfGU-4g)\n" }, { "path": "docs/SUMMARY.md", "content": "# Summary\n\n## Guides\n\n- [Getting Started](guides/Getting_Started.md)\n- [Running the Examples](guides/Running_the_Examples.md)\n- [Integrating Your Project](guides/Integrating_Your_Project.md)\n- [Debugging with Duktape](guides/Debugging_With_Duktape.md)\n- [Why Not React Native?](guides/Why_Not_React_Native.md)\n\n## Components\n\n- [View](components/View.md)\n- [Image](components/Image.md)\n- [Text](components/Text.md)\n- [Canvas](components/Canvas.md)\n- [Button](components/Button.md)\n- [Slider](components/Slider.md)\n- [ListView](components/ListView.md)\n- [ScrollView](components/ScrollView.md)\n- [Style Properties](components/Styles.md)\n- [Synthetic Events](components/Events.md)\n\n## Native\n\n- [Custom Native Components](native/Custom_Native_Components.md)\n- [JS/Native Interop](native/Interop.md)\n\n## Have a Question?\n\n- [GitHub Discussions](https://github.com/nick-thompson/react-juce/discussions)\n- [Discord Chatroom](https://discord.gg/3H4wwVf49v)\n- [Open an Issue](https://github.com/nick-thompson/react-juce/issues)\n" }, { "path": "docs/components/Button.md", "content": "# Button\n\nA basic React component for rendering a button with web-like behavior and\nevent interactions.\n\n## Example\n\n```js\nimport React, { Component } from \"react\";\nimport { View, Button, Text } from \"react-juce\";\n\nfunction App(props) {\n return (\n \n console.log('Click')}\n onMouseEnter={(e) => console.log('Mouse Enter!)}\n onMouseLeave={(e) => console.log('Mouse Leave!)}>\n Click me!\n \n \n );\n}\n\nconst styles = {\n outer: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"#17191f\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n button: {\n borderColor: \"#66cffd\",\n padding: 20,\n },\n};\n```\n\n## Props\n\n`Button` inherits support for all of the core `View` properties described in [View](View.md).\n\n#### onClick\n\nA callback property which will be invoked in response to a mouse click. The callback should\naccept a single [`SyntheticMouseEvent`](Events.md) argument.\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------------------------------------------------------------------------------- |\n| function | No | Partial: [Standard](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) |\n\n## Styles\n\n`Button` supports all of the default style properties described in [Style Properties](Styles.md).\n" }, { "path": "docs/components/Canvas.md", "content": "# TODO\n" }, { "path": "docs/components/Events.md", "content": "# TODO: Describe synthetic event support\n" }, { "path": "docs/components/Image.md", "content": "# Image\n\nA React component for displaying different types of images, including network images,\nlocal image files, and image data URLs.\n\nThe example below demonstrates displaying a local image file, and a data url.\n\n## Example\n\n```js\nimport React, { Component } from \"react\";\nimport { View, Image } from \"react-juce\";\n\n// Using a bundling tool like Webpack or Rollup, we can configure this import\n// to read the image file from disk at the time of bundling, and embed the data\n// URL in our javascript bundle which can be imported just like this.\nimport logoDataUri from \"./logo.jpg\";\n\nfunction App(props) {\n return (\n console.log(\"Mouse event!\", e)}>\n \n \n \n );\n}\n\nconst styles = {\n outer: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"ff17191f\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n image: {\n width: \"25%\",\n height: \"25%\",\n padding: 20,\n },\n};\n```\n\n## Props\n\n`Image` inherits support for all of the core `View` properties described in [View](View.md).\n\n#### source\n\nThe image source (either a remote URL ([#14](https://github.com/nick-thompson/react-juce/issues/14)), a local file resource, or a data uri).\n\n| Type | Required | Supported |\n| ------ | -------- | -------------------------------------------------------------------------- |\n| string | No | Partial: [Standard](https://developer.mozilla.org/en-US/docs/Glossary/URL) |\n\n## Styles\n\n`Image` supports all of the default style properties described in [Style Properties](Styles.md).\n" }, { "path": "docs/components/ListView.md", "content": "# TODO\n" }, { "path": "docs/components/ScrollView.md", "content": "# TODO\n" }, { "path": "docs/components/Slider.md", "content": "# Slider\n\nA basic React component for rendering a linear slider or rotary knob, common in\nmany audio applications.\n\n`Slider` is simply a composition of a single `View` component, a single `Canvas` component,\nand a set of default drawing operations to render common slider representations.\n\n## Example\n\n```js\nimport React, { Component } from \"react\";\nimport { View, Slider, Text } from \"react-juce\";\n\nfunction App(props) {\n return (\n \n \n Cutoff Frequency\n \n \n );\n}\n\nconst styles = {\n outer: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"#17191f\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n};\n```\n\n## Props\n\n`Slider` inherits support for all of the core `View` properties described in [View](View.md).\n\n#### sensitivity\n\nSets the sensitivity of a mouse drag interaction as it relates to changing the slider value.\nThe default value is `0.005`. Smaller numbers are less sensitive, larger numbers more sensitive.\n\n| Type | Required | Supported |\n| ------ | -------- | ------------ |\n| number | No | Non-Standard |\n\n#### value\n\nSets the current value of the slider.\n\nSee React.js' notion of [controlled and uncontrolled components](https://reactjs.org/docs/forms.html#controlled-components). The `Slider`\nvalue property and `onChange` behavior follow this model.\n\n| Type | Required | Supported |\n| ------ | -------- | ------------ |\n| number | No | Non-Standard |\n\n#### onDraw\n\nA callback property which will be invoked when its time to draw to the underlying `Canvas`.\nThis property is much like the `onDraw` property on the `Canvas` view itself, but with additional\narguments: (`context`, `width`, `height`, `value`).\n\nThese arguments are, respectively, the underlying canvas rendering context, the current width of the\nunderlying canvas object, the current height of the underlying canvas object, and the current slider value\non the range [0, 1].\n\nDefault drawing operations are provided as static members of the `Slider` class, which\ncan be passed directly as the `onDraw` property:\n\n- `Slider.drawLinearHorizontal`\n- `Slider.drawLinearVertical`\n- `Slider.drawRotary` (Default)\n\n| Type | Required | Supported |\n| -------- | -------- | ------------ |\n| function | No | Non-Standard |\n\n#### onChange\n\nA callback property which will be invoked when the slider's value changes. The callback should\naccept a single argument: a number on the range [0, 1].\n\n| Type | Required | Supported |\n| -------- | -------- | ------------ |\n| function | No | Non-Standard |\n\n#### mapDragGestureToValue\n\nA callback property which will be invoked to map a drag gesture to a new slider value. This\nallows for customization of the drag behavior, for example:\n\n- Behavior that maps drags \"up and to the right\" as increasing in value, and \"down and to the left\" as decreasing.\n- Behavior that maps only rightward drag as increasing in value and leftward drag as decreasing invalue.\n- Behavior that maps only upwards drag as increasing in value and downwards drag as decreasing invalue.\n\nThe callback should accept five arguments:\n`(mouseDownX, mouseDownY, sensitivity, valueAtDragStart, dragEvent)`. Respectively, these\narguments are the x and y position of the mouse at the time of the mouseDown event, the `sensitivity`\nof the slider as defined by the `sensitivity` prop above, the slider value at the time the drag started,\nand the current `SyntheticMouseEvent` for the drag operation.\n\nDefault mapping operations are provided as static members of the `Slider` class, which\ncan be passed directly as the `mapDragGestureToValue` property:\n\n- `Slider.linearHorizontalGestureMap`\n- `Slider.linearVerticalGestureMap`\n- `Slider.rotaryGestureMap` (Default)\n\n| Type | Required | Supported |\n| -------- | -------- | ------------ |\n| function | No | Non-Standard |\n\n## Styles\n\n`Slider` supports all of the default style properties described in [Style Properties](Styles.md).\n" }, { "path": "docs/components/Styles.md", "content": "# Style Properties\n\nStyle properties in React-JUCE generally aim to match the behavior and experience\nof writing CSS or writing a StyleSheet with React Native. It's important to note, however,\nthat these style properties _are not_ proper CSS, and that we have no notion of parsing CSS\nstylesheets. In React-JUCE, these properties are simple directives passed to the underlying `juce::Component`\nheirarchy that yield behavior that matches much of the CSS specificiation.\n\nAt present, these style properties are applied as a top-level prop to any given component, as you would with\nany other prop. In the future, we may adopt an API closer to that of React Native's StyleSheet.\n\n## Layout Props\n\n| Property | Support | Spec |\n| ------------------ | ------- | -------------------------------------------------------------------------------- |\n| flex | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| flex-grow | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| flex-shrink | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| flex-basis | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| flex-direction | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| justify-content | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| align-items | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| align-content | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| align-self | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| flex-wrap | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| position | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| left | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| top | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| right | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| bottom | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| width | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| height | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| min-width | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| min-height | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| max-width | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| max-height | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| aspect-ratio | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| direction | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| overflow | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-left | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-top | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-right | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-bottom | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-start | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-end | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-horizontal | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| margin-vertical | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-left | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-top | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-right | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-bottom | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-start | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-end | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-horizontal | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n| padding-vertical | Yes | [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) |\n\n## View Props\n\n| Property | Support | Spec |\n| -------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |\n| border-left-width | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) |\n| border-right-width | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) |\n| border-top-width | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) |\n| border-bottom-width | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) |\n| border-left-color | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) |\n| border-right-color | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) |\n| border-top-color | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) |\n| border-bottom-color | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) |\n| border-bottom-left-radius | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |\n| border-bottom-right-radius | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |\n| border-top-left-radius | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |\n| border-top-right-radius | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |\n| border-width | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) |\n| border-color | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) |\n| border-radius | Planned [(#143)](https://github.com/nick-thompson/react-juce/issues/143) | [MDN border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |\n| background-color | Partial [(#84)](https://github.com/nick-thompson/react-juce/issues/84) | [MDN background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) |\n| opacity | Yes | [juce::Component::setAlpha](https://docs.juce.com/master/classComponent.html#a1b9329a87c71ed01319071e0fedac128) |\n" }, { "path": "docs/components/Text.md", "content": "# Text\n\nA React component for displaying text.\n\nUnlike React Native and React-DOM, `Text` does not yet support nesting ([#6](https://github.com/nick-thompson/react-juce/issues/6)), though\nit does happily support styling, and touch handling.\n\n## Example\n\n```js\nimport React, { Component } from \"react\";\nimport { View, Text } from \"react-juce\";\n\nfunction App(props) {\n return (\n \n Hello, \n {props.name}\n \n );\n}\n\nconst styles = {\n outer: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"#17191f\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n labelText: {\n color: \"#626262\",\n fontSize: 16.0,\n lineSpacing: 1.6,\n },\n nameText: {\n color: \"#6262f8\",\n fontSize: 16.0,\n lineSpacing: 1.6,\n },\n};\n```\n\n## Props\n\n`Text` inherits support for all of the core `View` properties described in [View](View.md).\n\n#### color\n\nThe color used to draw the text\n\n| Type | Required | Supported |\n| ------ | -------- | ------------------------------------------------------------------ |\n| string | No | [Standard](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |\n\n#### fontSize\n\nThe font size used to draw the text\n\n| Type | Required | Supported |\n| ------ | -------- | --------------------------------------------------------------------- |\n| string | No | [Partial](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) |\n\n#### fontFamily\n\nThe font family name with which to draw the text\n\n| Type | Required | Supported |\n| ------ | -------- | ----------------------------------------------------------------------- |\n| string | No | [Partial](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |\n\n#### fontStyle\n\nSets whether the text should be rendered bold, italics, or normal.\n\n| Type | Required | Supported |\n| ------ | -------- | ---------------------------------------------------------------------- |\n| string | No | [Partial](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) |\n\n#### justification\n\nSets the horizontal alignment of the text within the container.\n\nTODO: Rename this prop and match the text-align spec\n\n| Type | Required | Supported |\n| ------ | -------- | -------------------------------------------------------------------- |\n| string | No | [Non-Standard](https://docs.juce.com/master/classJustification.html) |\n\n#### kerningFactor\n\nSets the horizontal spacing between text characters.\n\nTODO: Rename this prop and match the letter-spacing spec\n\n| Type | Required | Supported |\n| ------ | -------- | --------------------------------------------------------------------------------------------- |\n| string | No | [Non-Standard](https://docs.juce.com/master/classFont.html#a996b7095b0956f62b71f24893e72a914) |\n\n#### lineSpacing\n\nSets the height of a line box, commonly used to apply vertical spacing between\nneighboring lines of text.\n\nTODO: Rename this prop and match the line-height spec\n\n| Type | Required | Supported |\n| ------ | -------- | --------------------------------------------------------------------------------------------------------- |\n| string | No | [Non-Standard](https://docs.juce.com/master/classAttributedString.html#a0506d7b2000aaebd5873ea23eca6ae6a) |\n\n#### wordWrap\n\nSets the word-wrap behavior for when the text content overflows its content box.\n\n| Type | Required | Supported |\n| ------ | -------- | --------------------------------------------------------------------------------------------------------- |\n| string | No | [Non-Standard](https://docs.juce.com/master/classAttributedString.html#ad752f270294ec5b2cef0c80863ee3a3c) |\n\n## Styles\n\n`Text` supports all of the default style properties described in [Style Properties](Styles.md).\n" }, { "path": "docs/components/TextInput.md", "content": "TextInput component imitates web's ``.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text\nSo it supports props like `placeholder`, `maxlength`, `onInput`, etc...\n\nTextInput also supports React's controlled components model:\nhttps://reactjs.org/docs/uncontrolled-components.html.\nIf the user supplies a `value` prop,\nthen it never renders anything into that text editor other than\nthe string supplied by that `value` prop.\n\n## Example\n\n```js\nimport React, { Component } from \"react\";\n\nimport { Text, TextInput, View } from \"react-juce\";\n\nclass App extends Component {\n constructor(props) {\n super(props);\n this._onInput = this._onInput.bind(this);\n\n this.state = {\n textValue: \"\",\n };\n }\n\n _onInput(event) {\n console.log(`onInput: ${event.value}`);\n this.setState({ textValue: event.value });\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nconst styles = {\n text_input: {\n backgroundColor: \"ff303030\",\n color: \"ff66FDCF\",\n fontSize: 15.0,\n fontFamily: \"Menlo\",\n fontStyle: Text.FontStyleFlags.bold,\n \"placeholder-color\": \"ffAAAAAA\",\n height: 30,\n width: 200,\n },\n};\n\nexport default App;\n```\n\n## Props\n\n**TODO**: Document props. See [the class](https://github.com/nick-thompson/react-juce/blob/master/packages/react-juce/src/components/TextInput.tsx#L11) for props in the meantime.\n" }, { "path": "docs/components/View.md", "content": "# View\n\nThe most fundamental of the core React-JUCE components, `View` is a container that supports layout with flexbox, style, and some event handling.\n`View` maps directly to the underlying native `reactjuce::View` instance, which is effectively a simple `juce::Component`.\n\n`View` is designed to be nested inside other views and can have 0 to many children of any type.\n\n## Example\n\n```js\nimport React, { Component } from \"react\";\nimport { View } from \"react-juce\";\n\nfunction App(props) {\n return (\n console.log(\"Mouse event!\", e)}>\n \n \n );\n}\n\nconst styles = {\n outer: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"ff17191f\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n inner: {\n width: \"25%\",\n height: \"25%\",\n backgroundColor: \"ffa7191f\",\n },\n};\n```\n\n## Props\n\n#### onMeasure\n\nA callback which will be invoked any time the `View`'s layout calculation changes.\nThe callback should accept a single argument, a [SyntheticEvent](Events.md) object holding\na `width` and `height` property reflecting the new size of the `View`.\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Yes: Non-Standard |\n\n#### onMouseDown\n\nA callback which will be invoked in response to a mouse button down event on the\nunderlying native component. The callback should accept a single argument, a [SyntheticMouseEvent](Events.md)\nobject similar in interface to [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Partial: Standard |\n\n#### onMouseUp\n\nA callback which will be invoked in response to a mouse button up event on the\nunderlying native component. The callback should accept a single argument, a [SyntheticMouseEvent](Events.md)\nobject similar in interface to [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Partial: Standard |\n\n#### onMouseEnter\n\nA callback which will be invoked in response to a mouse entering the local bounds of a native component.\nThe callback should accept a single argument, a `SyntheticMouseEvent`\nobject similar in interface to [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Partial: Standard |\n\n#### onMouseLeave\n\nA callback which will be invoked in response to a mouse leaving the local bounds of a native component.\nThe callback should accept a single argument, a `SyntheticMouseEvent`\nobject similar in interface to [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Partial: Standard |\n\n#### onMouseDoubleClick\n\nA callback which will be invoked in response to a mouse button double click on the\nunderlying native component. The callback should accept a single argument, a [SyntheticMouseEvent](Events.md)\nobject similar in interface to [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Partial: Standard |\n\n#### onKeyPress\n\nA callback which will be invoked in response to a key press event while the\nunderlying native component has focus. The callback should accept a single argument, a [SyntheticKeyboardEvent](Events.md)\nobject similar in interface to [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent).\n\n| Type | Required | Supported |\n| -------- | -------- | ----------------- |\n| function | No | Partial: Standard |\n\n## Styles\n\n`View` supports all of the default style properties described in [Style Properties](Styles.md).\n" }, { "path": "docs/guides/Debugging_With_Duktape.md", "content": "# Debugger Support\n\n(Because console.log() isn't always enough)\n\nNote, there are known issues debugging on Windows. See [Known Issues](#known-issues)\n\nJS debugging support for React-JUCE/Duktape is available via [Visual Studio Code](https://code.visualstudio.com/) using the [Duktape Debugger](https://marketplace.visualstudio.com/items?itemName=HaroldBrenes.duk-debug) extension.\nCurrently this is the only debug client known to support the use of source maps with Duktape.\nIf you do become aware of other Duktape debug clients that may work well with React-JUCE, please open an issue with details for us to investigate.\n\nReact-JUCE provides an implementation of the Duktape debugging interface via `EcmascriptEngine::debuggerAttach` and `EcmascriptEngine::debuggerDetach`.\n\nIf you are using the `ReactApplicationRoot` class to host your React app/ui then you can enjoy a debugging experience similar to that of React Native.\n\nIn debug builds with `JUCE_DEBUG` defined, ensure your editor has focus and use the `CTRL-d/CMD-d` command to trigger a call to `EcmascriptEngine::debuggerAttach`.\nThis command blocks the UI and awaits connection from a debug client. You can then attach your debugger, continue execution and set breakpoints etc.\n\nTo configure the Duktape debugger extension for use with React-JUCE, you will need to do the following:\n\n- Download/Add the Duktape debugger extension.\n\n- Ensure you have compiled React-JUCE and your application/plugin in debug mode (with `JUCE_DEBUG` defined).\n\n- Add a launch configuration for debugging your UI.\n\nAn example launch configuration for use with the `GainPlugin` example project is provided below.\nNote that `localRoot` points to the root `workspaceFolder`. In this case we assume `workspaceFolder` to be `examples/GainPlugin/jsui`.\nThe `outDir` entry points to the build directory containing the compiled JS bundle you wish to debug.\nThis `outDir` directory should also contain the bundle's associated source map.\n\n```\n{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"name\": \"JSUI Debug Attach\",\n \"type\": \"duk\",\n \"request\": \"attach\",\n \"address\": \"localhost\",\n \"port\": 9091,\n \"localRoot\": \"${workspaceFolder}\",\n \"sourceMaps\": true,\n \"outDir\": \"${workspaceFolder}/build/js\",\n \"stopOnEntry\": false,\n \"debugLog\": false\n }\n ]\n}\n```\n\nTo ensure debugging works reliably, you need to ensure your source map has been generated by webpack using [devtool](https://webpack.js.org/configuration/devtool/).\nThe following option should be added to the `output` key in your webpack config:\n\n`devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'`\n\nYou also need to ensure that your bundle is not minified, this can be achieved by building your JS bundle with `webpack --mode=development`.\nIn the case of the `GainPlugin` example this can be achieved by running `npm run start` in `GainPlugin/jsui`.\n\nThe `webpack.config.js` template provided by React-JUCE enables all of this for you. See: [Starting a new Project](New_Project.md) for a project\ntemplate setup which includes debugger support. Project template files are available under `react-juce/packages/react-juce/template`.\n\nExample `webpack.config.js`:\n\n```\nmodule.exports = {\n entry: './src/index.js',\n // This is the section you care about for debugging.\n output: {\n path: __dirname + '/build/js',\n filename: 'main.js',\n sourceMapFilename: \"[file].map\",\n devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'\n },\n devtool: \"source-map\",\n module: {\n rules: [\n {\n test: /\\.(js|jsx)$/,\n exclude: /node_modules/,\n use: ['babel-loader']\n },\n {\n test: /\\.svg$/,\n exclude: /node_modules/,\n use: ['svg-inline-loader']\n },\n {\n test: /\\.(png|jpeg|jpg|gif)$/,\n use: [\n {\n loader: 'url-loader',\n options: {\n limit: true,\n esModule: false\n }\n }\n ]\n }\n ]\n },\n}\n```\n\nTo test debugging support using the `GainPlugin` example do the following:\n\n- Open the `GainPlugin/jsui` directory in Visual Studio Code.\n\n- Add the `launch.json` configuration from above to your `.vscode` directory under `GainPlugin/jsui`.\n\n- Run `npm run start` in the `jsui` directory\n\n- Start the standalone plugin app in your IDE (i.e. Visual Studio/Xcode)\n\n- Give the `GainPlugin`'s UI/PluginEditor focus and hit `CTRL-d` (Win) / `CMD-d` (Mac)\n\n- Start the `JSUI Debug Attach` launch task from the VSCode debugger menu.\n\n- Set some breakpoints, profit!\n\n## Known Issues\n\n- Debugging support is currently experimental and issues may occur from time to time whilst we refine the experience.\n\n- At present there are some issues debugging duktape under Windows. The vscode-duktape-debug extension requires a patch to resolve source map entries, without this patch setting breakpoints in source files fails. To obtain a version of the extension with this patch you can fetch https://github.com/JoshMarler/vscode-duktape-debug/tree/topic/fix-windows-debug-blueprint. To use this version of the extension run `npm install` in the `vscode-duktape-debug` root followed by `npm run compile`. You can then copy the contents of `vscode-duktape-debug/dist` to your vscode extensions directory which is usually under `.vscode` in your home folder. Copy the contents of `vscode-duktape-debug/dist` to `.vscode/extensions/haroldbrenes.duk-debug-0.5.6`. There are issues attaching the debugger with breakpoints already set in vscode on Windows. You will need to attach the debugger and then set breakpoints once attached.\n\n## Acknowledgements\n\nThanks to [harold-b](https://github.com/harold-b/vscode-duktape-debug) for his excellent extension.\n" }, { "path": "docs/guides/Getting_Started.md", "content": "# Getting Started\n\nThis guide assumes you have some familiarity with [React.js](https://reactjs.org/) and with [JUCE](https://juce.com/), and it is therefore recommended that you spend some time getting comfortable there, if you're not already, before embarking on this guide.\n\n## Dependencies\n\nTo get started with React-JUCE, you'll first need to install a few dependencies:\n\n- [Node.js](https://nodejs.org/en/) v8.11.0+\n- [npm](https://www.npmjs.com/) v5.6.0+\n- [JUCE](https://juce.com/) v5.4.2+ (Optional if you are only running the examples)\n- Xcode10.2+ (MacOS)\n- Visual Studio 2017+ (Windows)\n\nOnce you have the dependencies installed, we need to clone the React-JUCE repository\nitself. React-JUCE's git repository contains necessary submodules, so we'll need to\ncollect those as well, which we can do one of two ways:\n\n```bash\n$ git clone --recurse-submodules git@github.com:nick-thompson/react-juce.git\n```\n\nor\n\n```bash\n$ git clone git@github.com:nick-thompson/react-juce.git\n$ cd react-juce\n$ git submodule update --init --recursive\n```\n\nNote that the `git@github.com` prefix here indicates cloning via SSH. If you prefer\nto work with git via HTTPS you'll want to swap in `https://github.com/nick-thompson/react-juce.git`\nin the above commands.\n\nAt this point, we've got everything ready to get our project up and running. Let's\nmove on to the next step, [running the demo plugin](Running_the_Examples.md).\n" }, { "path": "docs/guides/Integrating_Your_Project.md", "content": "# Starting a New Project\n\nThis step assumes you've already reviewed the [Getting Started](Getting_Started.md) guide. If not,\nplease start there!\n\nOk, so you're ready to add some React.js to your JUCE project. Whether that's a totally new project or a preexisting project, getting React-JUCE involved is the same. If you're starting your project from scratch, I recommend running through the [Getting started with the Projucer](https://docs.juce.com/master/tutorial_new_projucer_project.html) tutorial on the JUCE website, if you haven't already.\n\nNow before we write any code, we have to add React-JUCE to our JUCE project. Fortunately, JUCE makes this super\neasy with the JUCE module format, and React-JUCE abides by that format. Follow along with the [Manage JUCE modules](https://docs.juce.com/master/tutorial_manage_projucer_project.html#tutorial_manage_projucer_project_managing_modules) section of the Projucer tutorial, wherein you'll need to add the React-JUCE module by pointing the Projucer to its location on disk. The actual React-JUCE JUCE module is located in the `react_juce` subdirectory of the root of the React-JUCE project.\n\n## Template Generator\n\nNext, the first thing we want to do here is write some React.js, so let's start with a \"Hello World!\" of our own. React-JUCE's `react-juce` npm package carries a template generator that you can use to boostrap a React application for your project. For this step, let's assume your JUCE project directory is at `~/MyProject`, the source files are at `~/MyProject/Source`, and we want to put the React application source at `~/MyProject/Source/jsui` (note, you can put this wherever you want). Now, to use the template generator, we start again at the root of the React-JUCE git repository:\n\n```bash\n$ pwd\n/Users/nick/Dev/react-juce\n$ cd packages/react-juce\n$ npm run init -- ~/MyProject/Source/jsui\n```\n\nThe template generator will create the `jsui` directory as suggested in the example command above, fill it\nwith a basic \"Hello World!\" app, and install local dependencies like React.js and Webpack. Like the [[GainPlugin Example|running-the-example]], we now need to build our output bundle.\n\n```bash\n$ cd ~/MyProject/Source/jsui\n$ npm start\n```\n\nAt this point we've got our app bundle ready to roll, so let's turn over to the native side to mount this into\nour JUCE project.\n\n## Native Code\n\nBecause we've already added the React-JUCE module to our Projucer project, we can jump straight into the code on the native side. Part of the native React-JUCE API is a particularly important class called `reactjuce::ReactApplicationRoot`. This class is mostly just a `juce::Component`, and in that way you should think about using it the same way you might use a `juce::Slider` in your application.\n\nFor example, let's suppose that we have our `MainComponent` or our `AudioProcessorPluginEditor` at the top of our project:\n\n```cpp\nclass MainComponent : public Component\n{\npublic:\n //==============================================================================\n MainComponent();\n ~MainComponent();\n\n //==============================================================================\n void paint (Graphics&) override;\n void resized() override;\n\nprivate:\n //==============================================================================\n JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)\n};\n```\n\nAdding the `reactjuce::ReactApplicationRoot` is easy, and should be familiar if you've worked with `juce::Component`s before:\n\n```cpp\nclass MainComponent : public Component\n{\npublic:\n //==============================================================================\n MainComponent()\n {\n addAndMakeVisible(appRoot);\n setSize(400, 300);\n }\n\n ~MainComponent();\n\n //==============================================================================\n void paint (Graphics&) override;\n\n void resized() override\n {\n appRoot.setBounds(getLocalBounds());\n }\n\nprivate:\n //==============================================================================\n reactjuce::ReactApplicationRoot appRoot;\n\n JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)\n};\n```\n\nIt's important to note here that our `appRoot` will be the point at which our React application code from earlier\nwill \"take over,\" and it's also important to note that you can add this `appRoot` wherever you need it in your application. For example, if you want to write your entire interface in React, you should mount your `appRoot` at the top of your application in your `MainComponent` or your `AudioProcessorPluginEditor`. If instead you want only to write your preset switcher in React, you can build the rest of your interface as usual with JUCE, and add the `appRoot` wherever the preset switcher should go within the context of your interface.\n\nNow we're almost done here, but if you compile and run right now you won't see your \"Hello from React.js!\"– of course, we haven't told the `appRoot` where to find the JavaScript bundle we made! So, putting the last piece together here:\n\n```cpp\nclass MainComponent : public Component\n{\npublic:\n //==============================================================================\n MainComponent()\n {\n // First thing we have to do is load our javascript bundle from the build\n // directory so that we can evaluate it within our appRot.\n\n // TODO: Replace this with the appropriate path to your javascript bundle!\n File bundle = File(\"/path/to/your/jsui/build/js/main.js\");\n\n addAndMakeVisible(appRoot);\n appRoot.evaluate(bundle);\n\n setSize(400, 300);\n }\n\n ~MainComponent();\n\n //==============================================================================\n void paint (Graphics&) override;\n\n void resized() override\n {\n appRoot.setBounds(getLocalBounds());\n }\n\nprivate:\n //==============================================================================\n reactjuce::ReactApplicationRoot appRoot;\n\n JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)\n};\n```\n\nThat's it! We've now integrated React-JUCE into our project, and now you can write freely in React.js and watch your application take shape.\n" }, { "path": "docs/guides/Running_the_Examples.md", "content": "# Running the GainPlugin Example project\n\nThis step assumes you've already reviewed the [Getting Started](Getting_Started.md) guide. If not,\nplease start there!\n\n## GainPlugin\n\n![Gain Plugin example project user interface](../_media/gainplugin.jpg)\n\nReact-JUCE includes an extremely simple utility gain plugin to demonstrate the minimal\ncode required for integrating React-JUCE into a JUCE project. To get it running,\nwe only need two steps: compiling the JavaScript bundle, and then compiling and\nrunning the native code.\n\n### JavaScript Bundle\n\nAll React-JUCE projects have two components: we have the native code that knows how\nto mount the React application into our JUCE project and satisfy calls from React's\nreconciler, and then we have the React.js application code that we want to run in the\nnative environment. In order to ease this handoff, we're using a tool in this\nexample called [Webpack](https://webpack.js.org/) that can compile a complete JavaScript project into a single\nfile. That single file is then the only thing we need to execute in the native\nenvironment.\n\nTo get the GainPlugin up and running for the first time, we have to first perform\nthat compilation step. So, from the root of the `React-JUCE` git repository:\n\n```bash\n$ cd examples/GainPlugin/Source/jsui/\n```\n\nThe `jsui/` directory here is the top level directory of all the\nReact.js application code that we used to build the example interface.\nWe use a build step managed by npm to compile all of our application javascript\ninto a single file that can be easily loaded up in the native app:\n\n```bash\n$ npm install\n$ npm run build\n```\n\nAt this point, you'll see an output file in `examples/GainPlugin/Source/jsui/build/js/`. That file location is important, because that's where the native code looks for executing the output file.\n\n### Native\n\nNow that we have our JavaScript bundle, the last step is simple: just hit Build and\nRun from your IDE! When the JUCE PluginEditor gets initialized, it will find your\nJavaScript build and evaluate it within the embedded interpreter to draw the\nGainPlugin interface.\n\n## Hot Reloading\n\nThe GainPlugin example is preconfigured with hot reloading, so that as you edit\nthe React application code, your interface will redraw itself instantly. In order\nto take advantage of this, we need to recompile our JavaScript bundle on the\nfly as we're editing our code. Fortunately, Webpack makes that simple, so from\nwithin the `jsui/` directory:\n\n```bash\n$ npm start\n```\n\nThis will first build your JavaScript bundle, then wait and watch your source files\nfor changes. When it finds a change, it will pick that change up and incrementally\nrebuild your bundle. In turn, React-JUCE will pick up the change to the bundle file\nand redraw your interface.\n\nNow that you're up and running, take a minute to tweak the GainPlugin React\napplication to get a sense of the workflow! When you're done, let's move on to\nthe next step, [adding React-JUCE to your own project](New_Project.md).\n" }, { "path": "docs/guides/Why_Not_React_Native.md", "content": "# Why Not React Native?\n\nThe React community first formed in 2013 when React was introduced as a framework for writing web applications. Shortly thereafter, the team announced React Native for rendering native iOS and Android mobile apps, and the React community grew accordingly. The community then introduced a project for rendering native Windows desktop apps from React, and since then several projects have spun off with similar goals. Why, then, do we need another one in React-JUCE?\n\nTo start, I think it's helpful to clarify the goals of these projects and the underlying philosophy that brings them together. Then, I think's helpful to recognize JUCE's utility and popularity in the audio application development space. Finally, once we've covered those points, I think the answer to our original question becomes quite clear, and shows why React-JUCE stands to make an impact in the audio application development space.\n\n## The React Philosophy\n\nWhen the React team introduced React Native in 2015, they made a point to clarify that React and React Native were different projects. With its introduction, they started sharing the idea \"Learn once, write anywhere,\" which we still see in their messaging today. What we see from that message is that their goal was never to be able to write a React web app and then push a button to ship that same app to native mobile. Rather, the goal was slightly higher level.\n\nAt the initial React.js announcement, the library focused totally on web applications. When React Native showed up, we saw the team split out the React DOM package. This step is very illuminating. After that, to talk about React in the context of a cross-platform web/mobile app, we have to consider three things: React, React DOM, and React Native. This distinction is helpful in that it shows React itself is only an abstract tool. It deals in abstract representations of a user interface, and the business logic around that user interface. But eventually this abstraction layer decays to real rendering primitives, and here we see what separates React DOM and React Native. React DOM provides a library of rendering primitives targeting the Web DOM. React Native provides a library of rendering primitives targeting native platform components in iOS and Android. (As a brief aside, this distinction in rendering primitives is exactly where React-JUCE fits into the picture as well, offering a library of rendering primitives that target JUCE.)\n\nThrough this lens, React Native's \"Learn once, write anywhere\" philosophy makes sense. Different rendering primitives on different platforms may have totally different semantics, and the idea of writing an application against one set of rendering primitives and then pushing a button to render against a new set of primitives just falls over in some cases. But the idea of _working in React_ never changes. With these tools, a single team can write a web application and then turn around and write a native iOS, Android or Windows desktop application with total familiarity. This isn't \"push a button, render anywhere,\" it's about lowering the barrier to entry to new platforms, unifying the development experience, and empowering developers to cross what have long been great divides in our industry.\n\n## The JUCE Ecosystem\n\nOur brief survey of the React landscape tells a compelling story when viewed from the perspective of a generic application developer. But what happens when we look from the perspective of an audio application developer?\n\nReact Native solves a very non-trivial problem in the way it bridges between iOS and Android. A React Native developer can write a single application and deploy it to two totally different platforms, while React Native takes care of answering all the prerequisite questions about how to get an application up and running on each respective platform, how to provision that top level window, and how to evaluate the application JavaScript bundle in an embedded interpreter.\n\nJUCE takes its place in the audio application development ecosystem answering very similar questions. Nearly all audio applications start with the same two requirements:\n\n- A window provisioned somewhere (either directly or perhaps by a host program) into which we can render our interface\n- An audio buffer from the driver on which we can operate our signal processing\n\nUnfortunately, in audio, and especially when we consider audio plugin development, this is a combinatorial problem which grows extremely quickly. To answer even the first bullet point above, we have a lot to consider.\n\n- How do I get to that top-level window when running as an AAX plugin on Windows?\n - What rendering primitives do I use once I'm there? Windows Platform APIs?\n- How do I get to that top-level window when running as an AU plugin on MacOS?\n - And what rendering primitives can I use here? CoreGraphics?\n- And what if I want to ship the same application as a standalone Linux application? Or even an embedded Linux application? How do I get to that top-level window against X11 there?\n\nI could keep that list running for a _long_ time. And that's just to address the first of the core requirements of an audio application; the same list runs back for getting access to the underlying audio callback in all of these scenarios.\n\nHere, I think it's fair to say that JUCE has solved a massively challenging problem very elegantly in abstracting over all of these combinations. To write an audio application with JUCE, developers need only start from the core questions about _what_ the application will do once it has access to that window and the underlying audio buffer, and JUCE will take care of extending that functionality across all of the combinations of target platform, windowing system, audio driver, and plugin host. This is why, in my opinion, JUCE has become such a widely adopted framework for audio application development.\n\n## React + JUCE = <3\n\nAgainst this backdrop, a compelling case for React-JUCE is already starting to reveal itself. But before going any further, I think it's worthwhile to say that React Native and React Native Windows _are_ great options.\n\nIf your goal is singular in focus, say, to ship an audio application on iOS, then starting at React Native is an excellent choice. React Native will solve the top level window question for you, and you may then have to solve the problem of \"How do I get to that audio buffer when running as a standalone on iOS,\" but that's a problem you'll only need to solve once. Or you might start at JUCE and figure out how to mount React Native into the window that JUCE provisions for you. Either way, in a scenario like this, your project will be neatly limited in the scope of the problems that you have to solve. I would happily recommend to people with a goal that has this type of focus to use React Native, or React Native Windows.\n\nBut this approach starts to break down when the project goal broadens. For example, maybe you want to ship your audio application as a standalone desktop app and a standalone iOS app. Now, if you start with React Native, you can find your answer to the question above for getting to the audio buffer just the same on iOS, but what happens when you want to ship to desktop? Well, maybe the audio buffer part is the same, and surely if you've integrated JUCE into your React Native project you can rely on JUCE for that part here too, but React Native doesn't render to desktop. So do you integrate a different framework for writing the desktop interface? Maybe you can integrate React Native Windows, but what about MacOS? Suddenly we're creeping back into the combinatorial problem we mentioned above, and we haven't even cracked this door open to include shipping the application as a cross-platform audio plugin, or potentially as a Linux application.\n\nHere is exactly the place where React-JUCE finds its home. With React-JUCE, we can leverage JUCE's elegant solution to this hugely combinatorial problem, while at the same time leveraging the capabilities that React has introduced to the world of app UI programming, with no extra overhead. Shipping an audio application with React as a standalone application across MacOS, Windows, Linux, and as a plugin across AAX, AU, VST3, LV2 is now as easy as it should be.\n\nAnd there's more still. It would be a shame to acknowledge the popularity of JUCE without addressing all of the many projects already shipped or actively underway with JUCE. React-JUCE is designed to be trivially integrated into any existing JUCE project: anywhere you can mount a `juce::Component`, whether that's in an existing project or a brand new project, you can mount React-JUCE, and start writing React.\n\nI started this project with the goal of fully embracing the \"Learn once, write anywhere\" message introduced by React and React Native. It's my hope now that in the same way React Native empowers React developers to approach mobile platforms, React-JUCE empowers developers to approach the audio application space.\n" }, { "path": "docs/native/Custom_Native_Components.md", "content": "# TODO\n" }, { "path": "docs/native/Interop.md", "content": "# JavaScript/Native Interop\n\nThere are generally two ways to cross the Native/JavaScript boundary:\n\n1. You can pass C++ values and functions into JavaScript, and JavaScript values and functions into C++ directly or via an event model\n2. Or, you can create a custom native View and render it in your React component tree\n\n## Value Passing\n\nTo pass C++ values and functions into your JS environment, see `EcmascriptEngine::registerNativeProperty`\nand `EcmascriptEngine::registerNativeMethod`. These methods will install the given values on either the `global`\nobject, or named object of your choosing.\n\nIn the other direction, you can pass values from JavaScript into C++ either via invoking the methods that\nwere installed via `EcmascriptEngine::registerNativeMethod` or by assigning a value to a named object accessible\nfrom the global object, and looking that value up or invoking it on the C++ side with `EcmascriptEngine::evaluateInline` or `EcmascriptEngine::invoke`.\n\n### Example\n\n```cpp\n// From C++\nengine->registerNativeProperty(\"world\", \"Hello!\");\nengine->registerNativeMethod(\"sayHello\", [this](juce::var::NativeFunctionArgs const& args) {\n // Here, `args.arguments[0]` comes from JavaScript\n std::cout << args.arguments[0].toStdString() << std::endl;\n});\n```\n\n```js\n// Then, from js\nconsole.log(\"Hello\", global.world);\nglobal.sayHello(\"World!\");\n```\n\nAnd similarly, in the other direction:\n\n```js\n// From js\nglobal.myFun = (x) => x * x;\nglobal.myValue = 17;\n```\n\n```cpp\n// From C++\nauto myValue = engine->evaluateInline(\"global.myValue\");\nauto result = engine->invoke(\"myFun\", (int) myValue);\n```\n\n## Custom Native View\n\nNow the other option is to define a totally custom native view, and register it with React.\nTo do this, you can make your own C++ class that inherits `reactjuce::View`, and override the necessary methods.\nBasically, a `reactjuce::View` is just a `juce::Component` with some extra goodies.\n\nFor greater detail, see [Custom Native Components](Custom_Native_Components.md), but for a brief example, see below.\n\n### Example\n\n```cpp\nclass MyCoolView : public reactjuce::View {\n void paint(juce::Graphics& g) override {\n // Do your own paint routine like usual.\n // You can also treat this whole class instance like your normal juce::Components. Add children, `addAndMakeVisible`,\n // `resized` and everything!\n }\n}\n```\n\nNow once you've got your custom view implementation, you have to tell React about it so that you can use it. The end goal with this is to be able to write something like this:\n\n```js\nfunction MyReactApp(props) {\n return (\n \n \n \n );\n}\n```\n\nWith this, you can write your juce::Components like normal, but use React to compose these things together into your full application.\nSo, how do we register your C++ class with React? All you need is `ReactApplicationRoot::registerViewType`:\n\n```cpp\nmAppRoot.registerViewType(\"MyCoolView\", []() {\n // This lambda will be called when we need to construct one of your custom view instances. So, first, we make one:\n auto view = std::make_unique();\n\n // Then we need to construct a shadow view, which will govern the layout. 99% of the time, you can just use the\n // default shadow view:\n auto shadowView = std::make_unique(view.get());\n\n // Then just return these guys as a pair\n return {std::move(view), std::move(shadowView)};\n});\n```\n\nThat's it, React can now understand your `MyCoolView`!\n\nNow there's one last cosmetic issue. In React, you can always make elements with `React.createElement(\"MyCoolView\", props, children);`,\nbut you rarely see that because people are used to using JSX and writing ``.\nIf you want to use JSX like that you have to make this little wrapper to abstract over the dynamic string argument:\n\n```js\nfunction MyCoolView(props) {\n return React.createElement(\"MyCoolView\", props, props.children);\n}\n\n// Now I can use it elsewhere in JSX...\nfunction MyApp(props) {\n return ;\n}\n```\n" }, { "path": "examples/GainPlugin/CMakeLists.txt", "content": "cmake_minimum_required(VERSION 3.15)\nproject(GainPlugin VERSION 0.1.0)\n\n# `juce_add_plugin` adds a static library target with the name passed as the first argument.\n# This target is a normal CMake target, but has a lot of extra properties set\n# up by default. As well as this shared code static library, this function adds targets for each of\n# the formats specified by the FORMATS arguments. This function accepts many optional arguments.\n# Check the readme at `docs/CMake API.md` in the JUCE repo for the full list.\n\njuce_add_plugin(GainPlugin\n # VERSION ... # Set this if the plugin version is different to the project version\n # ICON_BIG ... # ICON_* arguments specify a path to an image file to use as an icon for the Standalone\n # ICON_SMALL ...\n # COMPANY_NAME ... # Specify the name of the plugin's author\n # IS_SYNTH TRUE/FALSE # Is this a synth or an effect?\n # NEEDS_MIDI_INPUT TRUE/FALSE # Does the plugin need midi input?\n # NEEDS_MIDI_OUTPUT TRUE/FALSE # Does the plugin need midi output?\n # IS_MIDI_EFFECT TRUE/FALSE # Is this plugin a MIDI effect?\n # EDITOR_WANTS_KEYBOARD_FOCUS TRUE/FALSE # Does the editor need keyboard focus?\n # COPY_PLUGIN_AFTER_BUILD TRUE/FALSE # Should the plugin be installed to a default location after building?\n PLUGIN_MANUFACTURER_CODE Reju # A four-character manufacturer id with at least one upper-case character\n PLUGIN_CODE Dem0 # A unique four-character plugin id with at least one upper-case character\n FORMATS AU VST3 Standalone # The formats to build. Other valid formats are: AAX Unity VST AU AUv3\n PRODUCT_NAME \"ReactJUCEGainPlugin\") # The name of the final executable, which can differ from the target name\n\n# `juce_generate_juce_header` will create a JuceHeader.h for a given target, which will be generated\n# into your build tree. This should be included with `#include `. The include path for\n# this header will be automatically added to the target. The main function of the JuceHeader is to\n# include all your JUCE module headers; if you're happy to include module headers directly, you\n# probably don't need to call this.\njuce_generate_juce_header(GainPlugin)\n\n# `target_sources` adds source files to a target. We pass the target that needs the sources as the\n# first argument, then a visibility parameter for the sources (PRIVATE is normally best practice,\n# although it doesn't really affect executable targets). Finally, we supply a list of source files\n# that will be built into the target. This is a standard CMake command.\ntarget_sources(GainPlugin PRIVATE PluginProcessor.cpp)\n\n# Add an explicit include path here so that React-juce's EcmascriptEngine can find\n# the included Duktape source. You can optionally point this elsewhere if you'd like to\n# include a custom Duktape build.\ntarget_include_directories(GainPlugin PRIVATE react_juce/)\n\n# `target_compile_definitions` adds some preprocessor definitions to our target. In a Projucer\n# project, these might be passed in the 'Preprocessor Definitions' field. JUCE modules also make use\n# of compile definitions to switch certain features on/off, so if there's a particular feature you\n# need that's not on by default, check the module header for the correct flag to set here. These\n# definitions will be visible both to your code, and also the JUCE module code, so for new\n# definitions, pick unique names that are unlikely to collide! This is a standard CMake command.\ntarget_compile_definitions(GainPlugin\n PRIVATE\n GAINPLUGIN_SOURCE_DIR=\"${CMAKE_CURRENT_SOURCE_DIR}\"\n JUCE_WEB_BROWSER=0 # If you remove this, add `NEEDS_WEB_BROWSER TRUE` to the `juce_add_plugin` call\n JUCE_USE_CURL=0 # If you remove this, add `NEEDS_CURL TRUE` to the `juce_add_plugin` call\n JUCE_VST3_CAN_REPLACE_VST2=0)\n\n# `target_link_libraries` links libraries and JUCE modules to other libraries or executables. Here,\n# we're linking our executable target to the `juce::juce_audio_utils` module. Inter-module\n# dependencies are resolved automatically, so `juce_core`, `juce_events` and so on will also be\n# linked automatically. If we'd generated a binary data target above, we would need to link to it\n# here too. This is a standard CMake command.\ntarget_link_libraries(GainPlugin PRIVATE\n juce::juce_recommended_config_flags\n juce::juce_recommended_lto_flags\n juce::juce_recommended_warning_flags\n juce::juce_core\n juce::juce_audio_basics\n juce::juce_audio_devices\n juce::juce_audio_processors\n juce::juce_audio_utils\n juce::juce_graphics\n juce::juce_gui_basics\n react_juce)\n" }, { "path": "examples/GainPlugin/PluginProcessor.cpp", "content": "/*\n ==============================================================================\n\n This file was auto-generated!\n\n It contains the basic framework code for a JUCE plugin processor.\n\n ==============================================================================\n*/\n\n#include \"PluginProcessor.h\"\n\n\n//==============================================================================\n/** Helper function for generating the parameter layout. */\nAudioProcessorValueTreeState::ParameterLayout createParameterLayout()\n{\n AudioProcessorValueTreeState::ParameterLayout params (\n std::make_unique(\n \"MainGain\",\n \"Gain\",\n NormalisableRange(0.0, 1.0),\n 0.8,\n String(),\n AudioProcessorParameter::genericParameter,\n [](float value, int /* maxLength */) {\n return String(Decibels::gainToDecibels(value), 1) + \"dB\";\n },\n nullptr\n ),\n std::make_unique(\n \"MainMute\",\n \"Mute\",\n false\n )\n );\n\n return params;\n}\n\n//==============================================================================\nGainPluginAudioProcessor::GainPluginAudioProcessor()\n : AudioProcessor (BusesProperties()\n .withInput (\"Input\", AudioChannelSet::stereo(), true)\n .withOutput (\"Output\", AudioChannelSet::stereo(), true)),\n params(*this, nullptr, JucePlugin_Name, createParameterLayout())\n{\n}\n\nGainPluginAudioProcessor::~GainPluginAudioProcessor()\n{\n stopTimer();\n}\n\n//==============================================================================\nconst String GainPluginAudioProcessor::getName() const\n{\n return JucePlugin_Name;\n}\n\nbool GainPluginAudioProcessor::acceptsMidi() const\n{\n #if JucePlugin_WantsMidiInput\n return true;\n #else\n return false;\n #endif\n}\n\nbool GainPluginAudioProcessor::producesMidi() const\n{\n #if JucePlugin_ProducesMidiOutput\n return true;\n #else\n return false;\n #endif\n}\n\nbool GainPluginAudioProcessor::isMidiEffect() const\n{\n #if JucePlugin_IsMidiEffect\n return true;\n #else\n return false;\n #endif\n}\n\ndouble GainPluginAudioProcessor::getTailLengthSeconds() const\n{\n return 0.0;\n}\n\nint GainPluginAudioProcessor::getNumPrograms()\n{\n return 1; // NB: some hosts don't cope very well if you tell them there are 0 programs,\n // so this should be at least 1, even if you're not really implementing programs.\n}\n\nint GainPluginAudioProcessor::getCurrentProgram()\n{\n return 0;\n}\n\nvoid GainPluginAudioProcessor::setCurrentProgram (int /* index */) {}\nconst String GainPluginAudioProcessor::getProgramName (int /* index */) { return {}; }\nvoid GainPluginAudioProcessor::changeProgramName (int /* index */, const String& /* newName */) {}\n\n//==============================================================================\nvoid GainPluginAudioProcessor::prepareToPlay (double sampleRate, int /* samplesPerBlock */)\n{\n gain.reset(sampleRate, 0.02);\n}\n\nvoid GainPluginAudioProcessor::releaseResources()\n{\n // When playback stops, you can use this as an opportunity to free up any\n // spare memory, etc.\n}\n\n#ifndef JucePlugin_PreferredChannelConfigurations\nbool GainPluginAudioProcessor::isBusesLayoutSupported (const BusesLayout& layouts) const\n{\n #if JucePlugin_IsMidiEffect\n ignoreUnused (layouts);\n return true;\n #else\n // This is the place where you check if the layout is supported.\n // In this template code we only support mono or stereo.\n if (layouts.getMainOutputChannelSet() != AudioChannelSet::mono()\n && layouts.getMainOutputChannelSet() != AudioChannelSet::stereo())\n return false;\n\n // This checks if the input layout matches the output layout\n #if ! JucePlugin_IsSynth\n if (layouts.getMainOutputChannelSet() != layouts.getMainInputChannelSet())\n return false;\n #endif\n\n return true;\n #endif\n}\n#endif\n\nvoid GainPluginAudioProcessor::processBlock (AudioBuffer& buffer, MidiBuffer& /* midiMessages */)\n{\n ScopedNoDenormals noDenormals;\n auto totalNumInputChannels = getTotalNumInputChannels();\n auto totalNumOutputChannels = getTotalNumOutputChannels();\n\n // In case we have more outputs than inputs, this code clears any output\n // channels that didn't contain input data, (because these aren't\n // guaranteed to be empty - they may contain garbage).\n // This is here to avoid people getting screaming feedback\n // when they first compile a plugin, but obviously you don't need to keep\n // this code if your algorithm always overwrites all the output channels.\n for (auto i = totalNumInputChannels; i < totalNumOutputChannels; ++i)\n buffer.clear (i, 0, buffer.getNumSamples());\n\n // Our intense dsp processing\n gain.setTargetValue(*params.getRawParameterValue(\"MainGain\"));\n gain.applyGain(buffer, buffer.getNumSamples());\n\n if (auto *muteParam = dynamic_cast(params.getParameter(\"MainMute\")))\n {\n bool muted = muteParam->get();\n if (muted)\n buffer.applyGain(0.0f);\n }\n\n // Read current block gain peak value\n gainPeakValue = buffer.getMagnitude (0, buffer.getNumSamples());\n}\n\n//==============================================================================\nbool GainPluginAudioProcessor::hasEditor() const\n{\n return true; // (change this to false if you choose to not supply an editor)\n}\n\nAudioProcessorEditor* GainPluginAudioProcessor::createEditor()\n{\n // The GainPlugin example uses the GenericEditor, which is a default\n // AudioProcessorEditor provided that will automatically bootstrap\n // your React root, install some native method hooks for parameter interaction\n // if you provide an AudioProcessorValueTreeState, and manage hot reloading\n // of the source bundle. You can always start with the GenericEditor\n // then switch to a custom editor when you need more explicit control.\n File sourceDir = File(GAINPLUGIN_SOURCE_DIR);\n File bundle = sourceDir.getChildFile(\"jsui/build/js/main.js\");\n\n auto* editor = new reactjuce::GenericEditor(*this, bundle);\n\n editor->setResizable(true, true);\n editor->setResizeLimits(400, 240, 400 * 2, 240 * 2);\n editor->getConstrainer()->setFixedAspectRatio(400.0 / 240.0);\n editor->setSize (400, 240);\n\n // Start timer to dispatch gainPeakValues event to update Meter values\n startTimer(100);\n\n return editor;\n}\n\nvoid GainPluginAudioProcessor::timerCallback()\n{\n if (auto* editor = dynamic_cast(getActiveEditor()))\n {\n // Dispatch gainPeakValues event used by Meter React component\n editor->getReactAppRoot().dispatchEvent(\n \"gainPeakValues\",\n static_cast(gainPeakValue),\n static_cast(gainPeakValue)\n );\n }\n}\n\n//==============================================================================\nvoid GainPluginAudioProcessor::getStateInformation (MemoryBlock& /* destData */)\n{\n // You should use this method to store your parameters in the memory block.\n // You could do that either as raw data, or use the XML or ValueTree classes\n // as intermediaries to make it easy to save and load complex data.\n}\n\nvoid GainPluginAudioProcessor::setStateInformation (const void* /* data */, int /* sizeInBytes */)\n{\n // You should use this method to restore your parameters from this memory block,\n // whose contents will have been created by the getStateInformation() call.\n}\n\n//==============================================================================\n// This creates new instances of the plugin..\nAudioProcessor* JUCE_CALLTYPE createPluginFilter()\n{\n return new GainPluginAudioProcessor();\n}\n" }, { "path": "examples/GainPlugin/PluginProcessor.h", "content": "/*\r\n ==============================================================================\r\n\r\n This file was auto-generated!\r\n\r\n It contains the basic framework code for a JUCE plugin processor.\r\n\r\n ==============================================================================\r\n*/\r\n\r\n#pragma once\r\n\r\n#include \"../JuceLibraryCode/JuceHeader.h\"\r\n\r\n//==============================================================================\r\n/**\r\n*/\r\nclass GainPluginAudioProcessor : public AudioProcessor, private Timer\r\n{\r\npublic:\r\n //==============================================================================\r\n GainPluginAudioProcessor();\r\n ~GainPluginAudioProcessor() override;\r\n\r\n //==============================================================================\r\n void prepareToPlay (double sampleRate, int samplesPerBlock) override;\r\n void releaseResources() override;\r\n\r\n #ifndef JucePlugin_PreferredChannelConfigurations\r\n bool isBusesLayoutSupported (const BusesLayout& layouts) const override;\r\n #endif\r\n\r\n void processBlock (AudioBuffer&, MidiBuffer&) override;\r\n\r\n //==============================================================================\r\n AudioProcessorEditor* createEditor() override;\r\n bool hasEditor() const override;\r\n\r\n //==============================================================================\r\n const String getName() const override;\r\n\r\n bool acceptsMidi() const override;\r\n bool producesMidi() const override;\r\n bool isMidiEffect() const override;\r\n double getTailLengthSeconds() const override;\r\n\r\n //==============================================================================\r\n int getNumPrograms() override;\r\n int getCurrentProgram() override;\r\n void setCurrentProgram (int index) override;\r\n const String getProgramName (int index) override;\r\n void changeProgramName (int index, const String& newName) override;\r\n\r\n //==============================================================================\r\n void getStateInformation (MemoryBlock& destData) override;\r\n void setStateInformation (const void* data, int sizeInBytes) override;\r\n\r\n //==============================================================================\r\n AudioProcessorValueTreeState& getValueTreeState() { return params; }\r\n \r\n void timerCallback() override;\r\n\r\nprivate:\r\n //==============================================================================\r\n AudioProcessorValueTreeState params;\r\n LinearSmoothedValue gain;\r\n std::atomic gainPeakValue;\r\n\r\n //==============================================================================\r\n JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (GainPluginAudioProcessor)\r\n};\r\n" }, { "path": "examples/GainPlugin/jsui/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "examples/GainPlugin/jsui/babel.config.js", "content": "module.exports = {\n presets: [\n [\n \"@babel/preset-env\",\n {\n modules: \"umd\",\n },\n ],\n \"@babel/preset-react\",\n ],\n plugins: [\n \"@babel/plugin-proposal-class-properties\",\n [\n \"@babel/plugin-transform-runtime\",\n {\n absoluteRuntime: false,\n corejs: 3,\n version: \"7.11.2\",\n },\n ],\n ],\n};\n" }, { "path": "examples/GainPlugin/jsui/package.json", "content": "{\n \"name\": \"ui\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@babel/runtime-corejs3\": \"^7.11.2\",\n \"file-loader\": \"6.1.0\",\n \"react\": \"^16.13.1\",\n \"react-juce\": \"^0.2.16\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.11.1\",\n \"@babel/plugin-proposal-class-properties\": \"^7.10.4\",\n \"@babel/plugin-transform-runtime\": \"^7.11.0\",\n \"@babel/preset-env\": \"^7.11.0\",\n \"@babel/preset-react\": \"^7.10.4\",\n \"babel-loader\": \"^8.0.4\",\n \"svg-inline-loader\": \"^0.8.0\",\n \"url-loader\": \"4.1.0\",\n \"webpack\": \"^5.46.0\",\n \"webpack-cli\": \"^4.7.2\"\n },\n \"scripts\": {\n \"start\": \"webpack -w --mode=development\",\n \"build\": \"webpack --mode=production\"\n }\n}\n" }, { "path": "examples/GainPlugin/jsui/src/AnimatedFlexBox.js", "content": "import React, { Component } from \"react\";\nimport { View, Text } from \"react-juce\";\n\nclass AnimatedFlexBoxExample extends Component {\n render() {\n return (\n \n \n Look at me, cell #1!\n \n \n Look at me, cell #2!\n \n \n Look at me, cell #3!\n \n \n Look at me, cell #4!\n \n \n Look at me, cell #5!\n \n \n Look at me, cell #6!\n \n \n Look at me, cell #7!\n \n \n Look at me, cell #8!\n \n \n );\n }\n}\n\nconst styles = {\n container: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"#17191f\",\n justifyContent: \"flex-start\",\n alignContent: \"flex-start\",\n flexWrap: \"wrap\",\n layoutAnimated: {\n duration: 200.0,\n frameRate: 45,\n easing: View.EasingFunctions.quadraticInOut,\n },\n },\n cell: {\n flex: 0.0,\n width: 100.0,\n height: 100.0,\n justifyContent: \"space-around\",\n alignItems: \"center\",\n backgroundColor: \"#87898f\",\n margin: 6.0,\n padding: 6.0,\n },\n text: {\n fontSize: 16.0,\n lineSpacing: 1.6,\n justification: Text.JustificationFlags.centred,\n },\n};\n\nexport default AnimatedFlexBoxExample;\n" }, { "path": "examples/GainPlugin/jsui/src/App.js", "content": "// import AnimatedFlexBoxExample from \"./AnimatedFlexBox\";\nimport Meter from \"./Meter\";\nimport Knob from \"./Knob\";\nimport ParameterToggleButton from \"./ParameterToggleButton\";\nimport React, { Component } from \"react\";\nimport { Canvas, Image, Text, View } from \"react-juce\";\n\nfunction animatedDraw(ctx) {\n let now = Date.now() / 10;\n let width = now % 100;\n let red = Math.sqrt(width / 100) * 255;\n let hex = Math.floor(red).toString(16);\n\n ctx.fillStyle = `#${hex}ffaa`;\n ctx.fillRect(0, 0, width, 2);\n}\n\n// Example of callback for image onLoad/onError\nfunction imageLoaded() {\n console.log(\"Image is loaded!\");\n}\n\nfunction imageError(error) {\n console.log(error.name);\n console.log(error.message);\n}\n\nclass App extends Component {\n constructor(props) {\n super(props);\n this._onMuteToggled = this._onMuteToggled.bind(this);\n\n this.state = {\n muted: false,\n };\n }\n\n _onMuteToggled(toggled) {\n this.setState({\n muted: toggled,\n });\n }\n\n render() {\n // Uncomment here to watch the animated flex box example in action\n // return (\n // \n // \n // \n // );\n\n const muteBackgroundColor = this.state.muted\n ? \"#66FDCF\"\n : \"hsla(162, 97%, 70%, 0)\";\n const muteTextColor = this.state.muted\n ? \"#17191f\"\n : \"hsla(162, 97%, 70%, 1)\";\n\n const logo_url =\n \"https://raw.githubusercontent.com/nick-thompson/react-juce/master/examples/GainPlugin/jsui/src/logo.png\";\n //const logo_png = require('./logo.png');\n //const logo_svg = require('./logo.svg');\n\n return (\n \n \n \n \n \n \n \n \n MUTE\n \n \n \n \n );\n }\n}\n\nconst styles = {\n container: {\n width: \"100%\",\n height: \"100%\",\n backgroundColor:\n \"linear-gradient(45deg, hsla(225, 15%, 11%, 0.3), #17191f 50%)\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n content: {\n flex: 1.0,\n flexDirection: \"column\",\n justifyContent: \"space-around\",\n alignItems: \"center\",\n padding: 24.0,\n maxWidth: 600,\n aspectRatio: 400.0 / 240.0,\n },\n logo: {\n flex: 0.0,\n width: \"80%\",\n aspectRatio: 281.6 / 35.0,\n placement: Image.PlacementFlags.centred,\n },\n meter: {\n flex: 0.0,\n width: 100.0,\n height: 16.0,\n },\n canvas: {\n flex: 0.0,\n width: 100.0,\n height: 2,\n marginTop: 10,\n },\n mute_button: {\n justifyContent: \"center\",\n alignItems: \"center\",\n borderRadius: 5.0,\n borderWidth: 2.0,\n borderColor: \"rgba(102, 253, 207, 1)\",\n marginTop: 10,\n minWidth: 30.0,\n minHeight: 30.0,\n width: \"20%\",\n height: \"17.5%\",\n },\n mute_button_text: {\n fontSize: 20.0,\n lineSpacing: 1.6,\n fontStyle: Text.FontStyleFlags.bold,\n },\n};\n\nexport default App;\n" }, { "path": "examples/GainPlugin/jsui/src/Knob.js", "content": "import React from \"react\";\nimport ParameterSlider from \"./ParameterSlider\";\nimport { Slider } from \"react-juce\";\nimport Label from \"./Label\";\nimport { useParameter } from \"./ParameterValueContext\";\nimport { View } from \"react-juce\";\n\nconst sliderFillColor = \"#66FDCF\";\nconst sliderTrackColor = \"#626262\";\nconst drawRotary = Slider.drawRotary(sliderTrackColor, sliderFillColor);\n\nconst Knob = ({ paramId }) => {\n const { stringValue, currentValue } = useParameter(paramId);\n return (\n \n \n \n );\n};\n\nconst styles = {\n container: {\n minWidth: 100.0,\n minHeight: 100.0,\n width: \"55%\",\n height: \"55%\",\n marginTop: 15,\n marginBottom: 15,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n slider: {\n width: \"100%\",\n height: \"100%\",\n },\n label: {\n width: \"100%\",\n height: \"100%\",\n flex: 1.0,\n justifyContent: \"center\",\n alignItems: \"center\",\n interceptClickEvents: false,\n position: \"absolute\",\n },\n};\nexport default Knob;\n" }, { "path": "examples/GainPlugin/jsui/src/Label.js", "content": "import React, { memo } from \"react\";\nimport { Text, View } from \"react-juce\";\n\nconst Label = ({ value, ...props }) => {\n return (\n \n {value}\n \n );\n};\n\nconst styles = {\n labelText: {\n color: \"#626262\",\n fontSize: 16.0,\n lineSpacing: 1.6,\n },\n};\n\nexport default memo(Label);\n" }, { "path": "examples/GainPlugin/jsui/src/Meter.js", "content": "import React, { Component } from \"react\";\nimport { EventBridge, Image, Text, View } from \"react-juce\";\n\nclass Meter extends Component {\n constructor(props) {\n super(props);\n\n this._onMeasure = this._onMeasure.bind(this);\n this._onMeterValues = this._onMeterValues.bind(this);\n\n this.state = {\n width: 0,\n height: 0,\n lcPeak: 0.0,\n rcPeak: 0.0,\n };\n }\n\n componentDidMount() {\n EventBridge.addListener(\"gainPeakValues\", this._onMeterValues);\n }\n\n componentWillUnmount() {\n EventBridge.removeListener(\"gainPeakValues\", this._onMeterValues);\n }\n\n _onMeterValues(lcPeak, rcPeak) {\n this.setState({\n lcPeak,\n rcPeak,\n });\n }\n\n _onMeasure(e) {\n this.setState({\n width: e.width,\n height: e.height,\n });\n }\n\n _renderVectorGraphics(lcPeak, rcPeak, width, height) {\n // Similar to the audio side of this, this is a pretty rudimentary\n // way of drawing a gain meter; we'd get a much nicer response by using\n // a peak envelope follower with instant attack and a smooth release for\n // each channel, but this is just a demo plugin.\n return `\n \n \n \n \n \n \n `;\n }\n\n render() {\n const { lcPeak, rcPeak, width, height } = this.state;\n\n return (\n \n \n \n );\n }\n}\n\nconst styles = {\n canvas: {\n flex: 1.0,\n height: \"100%\",\n width: \"100%\",\n position: \"absolute\",\n left: 0.0,\n top: 0.0,\n interceptClickEvents: false,\n },\n};\n\nexport default Meter;\n" }, { "path": "examples/GainPlugin/jsui/src/ParameterSlider.js", "content": "import React, { memo, useCallback } from \"react\";\nimport { Slider } from \"react-juce\";\nimport {\n beginParameterChangeGesture,\n endParameterChangeGesture,\n setParameterValueNotifyingHost,\n} from \"./nativeMethods\";\n\nconst ParameterSlider = ({ value, paramId, children, ...props }) => {\n const onMouseDown = (e) => {\n beginParameterChangeGesture(paramId);\n };\n\n const onMouseUp = (e) => {\n endParameterChangeGesture(paramId);\n };\n\n const onSliderValueChange = (value) => {\n setParameterValueNotifyingHost(paramId, value);\n };\n\n return (\n \n {children}\n \n );\n};\n\n// TODO: PropTypes Validation\n// paramId should be required and has type of string\n// https://www.npmjs.com/package/prop-types\n\nexport default memo(ParameterSlider);\n" }, { "path": "examples/GainPlugin/jsui/src/ParameterToggleButton.js", "content": "import ParameterValueStore from \"./ParameterValueStore\";\nimport React, { Component } from \"react\";\nimport { Button } from \"react-juce\";\nimport {\n beginParameterChangeGesture,\n endParameterChangeGesture,\n setParameterValueNotifyingHost,\n} from \"./nativeMethods\";\n\nclass ParameterToggleButton extends Component {\n constructor(props) {\n super(props);\n\n this._handleClick = this._handleClick.bind(this);\n this._handleEnter = this._handleEnter.bind(this);\n this._handleLeave = this._handleLeave.bind(this);\n this._onParameterValueChange = this._onParameterValueChange.bind(this);\n\n const paramState = ParameterValueStore.getParameterState(\n this.props.paramId\n );\n\n const initialDefaultValue =\n typeof paramState.defaultValue === \"number\"\n ? paramState.defaultValue\n : 0.0;\n\n const initialValue =\n typeof paramState.currentValue === \"number\"\n ? paramState.currentValue\n : 0.0;\n\n this.defaultBorderColor = \"#66FDCF\";\n this.hoverBorderColor = \"#66CFFD\";\n\n this.state = {\n defaultValue: initialDefaultValue,\n value: initialValue,\n borderColor: this.defaultBorderColor,\n };\n\n if (typeof this.props.onToggled === \"function\") {\n this.props.onToggled(initialValue !== 0.0);\n }\n }\n\n componentDidMount() {\n ParameterValueStore.addListener(\n ParameterValueStore.CHANGE_EVENT,\n this._onParameterValueChange\n );\n }\n\n componentWillUnmount() {\n ParameterValueStore.removeListener(\n ParameterValueStore.CHANGE_EVENT,\n this._onParameterValueChange\n );\n }\n\n _handleClick(e) {\n const newValue = this.state.value === 0.0 ? 1.0 : 0.0;\n\n this.setState({\n value: newValue,\n });\n\n if (\n typeof this.props.paramId === \"string\" &&\n this.props.paramId.length > 0\n ) {\n setParameterValueNotifyingHost(this.props.paramId, newValue);\n }\n\n if (typeof this.props.onToggled === \"function\") {\n this.props.onToggled(newValue !== 0.0);\n }\n }\n\n _handleEnter(e) {\n beginParameterChangeGesture(this.props.paramId);\n this.setState({\n borderColor: this.hoverBorderColor,\n });\n }\n\n _handleLeave(e) {\n endParameterChangeGesture(this.props.paramId);\n this.setState({\n borderColor: this.defaultBorderColor,\n });\n }\n\n _onParameterValueChange(paramId) {\n const shouldUpdate =\n typeof this.props.paramId === \"string\" &&\n this.props.paramId.length > 0 &&\n this.props.paramId === paramId;\n\n if (shouldUpdate) {\n const state = ParameterValueStore.getParameterState(paramId);\n\n const newDefaultValue = state.defaultValue;\n const newValue = state.currentValue;\n\n this.setState({\n defaultValue: newDefaultValue,\n value: newValue,\n });\n\n if (typeof this.props.onToggled === \"function\") {\n this.props.onToggled(newValue !== 0.0);\n }\n }\n }\n\n render() {\n const { parameterId, onToggled, ...other } = this.props;\n\n return (\n \n {this.props.children}\n \n );\n }\n}\n\nexport default ParameterToggleButton;\n" }, { "path": "examples/GainPlugin/jsui/src/ParameterValueContext.js", "content": "import React, {\n createContext,\n useContext,\n useState,\n useCallback,\n useEffect,\n} from \"react\";\nimport { EventBridge } from \"react-juce\";\n\nexport const ParamIds = {\n MainGain: \"MainGain\",\n MainMute: \"MainMute\",\n};\n\nconst defaultValues = {\n MainGain: {\n defaultValue: 0.0,\n currentValue: 0.0,\n stringValue: \"loading\",\n },\n MainMute: {\n defaultValue: false,\n currentValue: false,\n stringValue: \"loading\",\n },\n};\n\nexport const ParameterValueContext = createContext(defaultValues);\n\nexport const useParameter = (paramId) => {\n return useContext(ParameterValueContext)[paramId];\n};\n\nexport const ParameterValueProvider = ({ children }) => {\n const [params, setParams] = useState(defaultValues);\n const onParameterValueChange = useCallback(\n (index, changedParamId, defaultValue, currentValue, stringValue) => {\n if (!ParamIds[changedParamId]) return;\n setParams((prevParams) => ({\n ...prevParams,\n [changedParamId]: {\n index,\n defaultValue,\n currentValue,\n stringValue,\n },\n }));\n },\n []\n );\n useEffect(() => {\n EventBridge.addListener(\"parameterValueChange\", onParameterValueChange);\n return () => {\n EventBridge.removeListener(\n \"parameterValueChange\",\n onParameterValueChange\n );\n };\n }, [onParameterValueChange]);\n\n return (\n \n {children}\n \n );\n};\n" }, { "path": "examples/GainPlugin/jsui/src/ParameterValueStore.js", "content": "import EventEmitter from \"events\";\nimport { EventBridge } from \"react-juce\";\n\n/** This is more or less a proxy to the EventBridge's parameter events that\n * caches last known values and provides components a way to access the\n * cache.\n */\nclass ParameterValueStore extends EventEmitter {\n constructor() {\n super();\n\n this.CHANGE_EVENT = \"change\";\n\n this.setMaxListeners(100);\n this._onParameterValueChange = this._onParameterValueChange.bind(this);\n\n EventBridge.addListener(\n \"parameterValueChange\",\n this._onParameterValueChange\n );\n\n this.state = {};\n }\n\n getParameterState(paramId) {\n if (!this.state.hasOwnProperty(paramId)) {\n return {};\n }\n\n return this.state[paramId];\n }\n\n _onParameterValueChange(\n index,\n paramId,\n defaultValue,\n currentValue,\n stringValue\n ) {\n this.state[paramId] = {\n parameterIndex: index,\n parameterId: paramId,\n defaultValue: defaultValue,\n currentValue: currentValue,\n stringValue: stringValue,\n };\n\n this.emit(this.CHANGE_EVENT, paramId);\n }\n}\n\nconst __singletonInstance = new ParameterValueStore();\n\nexport default __singletonInstance;\n" }, { "path": "examples/GainPlugin/jsui/src/index.js", "content": "import React from \"react\";\nimport ReactJUCE from \"react-juce\";\nimport App from \"./App\";\nimport { ParameterValueProvider } from \"./ParameterValueContext\";\n\nReactJUCE.render(\n \n \n ,\n ReactJUCE.getRootContainer()\n);\n" }, { "path": "examples/GainPlugin/jsui/src/nativeMethods.js", "content": "export const beginParameterChangeGesture = (paramId) =>\n global.beginParameterChangeGesture(paramId);\n\nexport const endParameterChangeGesture = (paramId) =>\n global.endParameterChangeGesture(paramId);\n\nexport const setParameterValueNotifyingHost = (paramId, value) =>\n global.setParameterValueNotifyingHost(paramId, value);\n" }, { "path": "examples/GainPlugin/jsui/webpack.config.js", "content": "const webpack = require(\"webpack\");\n\nmodule.exports = {\n entry: \"./src/index.js\",\n output: {\n path: __dirname + \"/build/js\",\n filename: \"main.js\",\n sourceMapFilename: \"[file].map\",\n devtoolModuleFilenameTemplate: (info) =>\n `webpack:///${info.absoluteResourcePath.replace(/\\\\/g, \"/\")}`,\n },\n // Required for duktape to ensure webpack chunk do not contain arrow functions\n target: [\"web\", \"es5\"],\n devtool: \"source-map\",\n module: {\n rules: [\n {\n test: /\\.(js|jsx)$/,\n exclude: /node_modules/,\n use: [\"babel-loader\"],\n },\n {\n test: /\\.svg$/,\n exclude: /node_modules/,\n use: [\"svg-inline-loader\"],\n },\n {\n test: /\\.(png|jpeg|jpg|gif)$/,\n use: [\n {\n loader: \"url-loader\",\n options: {\n limit: true,\n esModule: false,\n },\n },\n ],\n },\n ],\n },\n plugins: [\n new webpack.DefinePlugin({\n \"process.env.NODE_DEBUG\": JSON.stringify(process.env.NODE_DEBUG),\n }),\n ],\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"blueprint\",\n \"version\": \"0.1.0\",\n \"description\": \"Write cross-platform native apps with React and JUCE\",\n \"directories\": {\n \"example\": \"examples\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/nick-thompson/react-juce.git\"\n },\n \"devDependencies\": {\n \"husky\": \"^4.3.8\",\n \"lint-staged\": \"^10.5.3\",\n \"prettier\": \"2.2.1\"\n },\n \"scripts\": {\n \"beautify\": \"prettier --write .\",\n \"lint\": \"prettier --check .\"\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"lint-staged\": {\n \"*.{ts,tsx,js,jsx,css,md,yml,yaml}\": \"prettier --write\"\n }\n}\n" }, { "path": "packages/react-juce/.gitignore", "content": "dist\n" }, { "path": "packages/react-juce/babel.config.js", "content": "module.exports = {\n presets: [\n \"@babel/preset-env\",\n \"@babel/preset-react\",\n \"@babel/preset-typescript\",\n ],\n plugins: [\n \"@babel/plugin-proposal-class-properties\",\n \"@babel/plugin-proposal-object-rest-spread\",\n [\n \"@babel/plugin-transform-runtime\",\n {\n absoluteRuntime: false,\n corejs: 3,\n version: \"^7.11.2\",\n },\n ],\n ],\n};\n" }, { "path": "packages/react-juce/package.json", "content": "{\n \"name\": \"react-juce\",\n \"version\": \"0.2.16\",\n \"description\": \"Write cross-platform native apps with React.js and JUCE.\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/nick-thompson/react-juce.git\"\n },\n \"main\": \"dist/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"files\": [\n \"dist/index.js\",\n \"dist/index.d.ts\",\n \"dist/lib\",\n \"dist/components\",\n \"dist/src\"\n ],\n \"author\": \"Nick Thompson\",\n \"devDependencies\": {\n \"@babel/cli\": \"^7.10.0\",\n \"@babel/core\": \"^7.11.1\",\n \"@babel/plugin-proposal-class-properties\": \"^7.11.0\",\n \"@babel/plugin-transform-runtime\": \"^7.11.0\",\n \"@babel/preset-env\": \"^7.11.0\",\n \"@babel/preset-react\": \"^7.10.4\",\n \"@babel/preset-typescript\": \"^7.10.4\",\n \"@types/core-js\": \"^2.5.4\",\n \"@types/invariant\": \"^2.2.33\",\n \"@types/node\": \"^14.6.4\",\n \"@types/react\": \"^16.9.41\",\n \"@types/react-reconciler\": \"^0.18.0\",\n \"awesome-typescript-loader\": \"^5.2.1\",\n \"chalk\": \"^2.4.2\",\n \"fs-extra\": \"^8.1.0\",\n \"typescript\": \"^3.9.6\",\n \"webpack\": \"^5.46.0\",\n \"webpack-cli\": \"^4.7.2\"\n },\n \"dependencies\": {\n \"@babel/runtime-corejs3\": \"^7.11.2\",\n \"camelcase\": \"^6.2.0\",\n \"color-string\": \"^1.5.4\",\n \"core-js\": \"2.6.0\",\n \"invariant\": \"^2.2.4\",\n \"known-css-properties\": \"^0.20.0\",\n \"matrix-js\": \"^1.5.1\",\n \"object-inspect\": \"^1.11.0\",\n \"react-reconciler\": \"^0.25.1\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.13.1\"\n },\n \"scripts\": {\n \"build\": \"webpack --mode=production\",\n \"watch\": \"webpack --watch --mode=development\",\n \"init\": \"node scripts/init.js\"\n }\n}\n" }, { "path": "packages/react-juce/scripts/init.js", "content": "#!/usr/bin/env node\n\nvar assert = require(\"assert\");\nvar chalk = require(\"chalk\");\nvar cp = require(\"child_process\");\nvar fs = require(\"fs-extra\");\nvar path = require(\"path\");\n\nvar args = process.argv.slice(2);\n\nassert(\n typeof args[0] === \"string\" && args[0].length > 0,\n \"Must provide a path to the directory in which to initialize the template.\"\n);\n\nvar targetDir = path.resolve(args[0]);\nvar packageDir = path.resolve(__dirname, \"..\");\nvar templateDir = path.resolve(packageDir, \"template\");\n\nconsole.log(\"Initializing a React-JUCE template in:\", chalk.green(targetDir));\nconsole.log(\"Directory tree will be created if it does not exist.\");\n\nfs.mkdirp(targetDir, function (err) {\n if (err) {\n console.error(chalk.red(err));\n process.exit(1);\n }\n\n console.log(\"[*] Copying template files\");\n\n fs.copy(templateDir, targetDir, function (err) {\n if (err) {\n console.error(chalk.red(err));\n process.exit(1);\n }\n\n console.log(\"[*] Installing dependencies\");\n\n cp.exec(\"npm install\", { cwd: targetDir }, function (err, stdout, stderr) {\n if (err) {\n console.error(chalk.red(err));\n console.error(stderr);\n process.exit(1);\n }\n\n console.log();\n console.log(`\n${chalk.blue(\n \"Success!\"\n)} Initialized a React-JUCE template in ${chalk.green(targetDir)}\n\nYou can now get started by typing:\n\n${chalk.blue(\"cd\")} ${args[0]}\n${chalk.blue(\"npm start\")}\n\nThen adding the reactjuce::ReactApplicationRoot component to your project.\n `);\n });\n });\n});\n" }, { "path": "packages/react-juce/src/components/Button.tsx", "content": "import React, { Component } from \"react\";\n\nimport { View } from \"./View\";\nimport { SyntheticMouseEvent } from \"../lib/SyntheticEvents\";\nimport { ViewInstance } from \"../lib/Backend\";\n\n//TODO: Once ViewProps work is complete we can probably\n// remove this in favour of ViewProps.\nexport interface ButtonProps {\n onClick: (e: SyntheticMouseEvent) => void;\n onMouseDown?: (e: SyntheticMouseEvent) => void;\n onMouseUp?: (e: SyntheticMouseEvent) => void;\n onMouseEnter?: (e: SyntheticMouseEvent) => void;\n onMouseLeave?: (e: SyntheticMouseEvent) => void;\n}\n\ntype ButtonState = {\n down: boolean;\n};\n\n/**\n * A simple Button component which can be used as a building block\n * for more complex button types.\n *\n * @example\n *\n * \n *\n * const styles = {\n * text: {\n * 'font-size': 18.0,\n * 'line-spacing': 1.6,\n * 'color': 'ff626262'\n * },\n * button: {\n * 'justify-content': 'center',\n * 'align-items': 'center',\n * 'width': '100%',\n * 'height': '100%',\n * 'border-radius': 5.0,\n * 'border-width': 2.0,\n * 'border-color': 'ff626262'\n * }\n * };\n *\n */\nexport class Button extends Component {\n private _ref: React.RefObject;\n\n constructor(props: ButtonProps) {\n super(props);\n this._ref = React.createRef();\n\n this.state = {\n down: false,\n };\n }\n\n handleDown = (e: SyntheticMouseEvent): void => {\n if (typeof this.props.onMouseDown === \"function\")\n this.props.onMouseDown.call(null, e);\n\n this.setState({\n down: true,\n });\n };\n\n handleUp = (e: SyntheticMouseEvent): void => {\n if (typeof this.props.onMouseUp === \"function\")\n this.props.onMouseUp.call(null, e);\n\n this.setState({\n down: false,\n });\n\n if (typeof this.props.onClick === \"function\") {\n const instance = this._ref ? this._ref.current : null;\n\n if (instance && instance.contains(e.relatedTarget)) {\n this.props.onClick(e);\n }\n }\n };\n\n render = () => {\n const { onMouseDown, onMouseUp, onClick, ...other } = this.props;\n const opacity = this.state.down ? 0.8 : 1.0;\n\n return (\n \n {this.props.children}\n \n );\n };\n}\n" }, { "path": "packages/react-juce/src/components/Canvas.ts", "content": "import React, { Component } from \"react\";\nimport Colors from \"../lib/MacroProperties/Colors\";\n\n// TODO: Need to explicitly bind this to members?\nexport class CanvasRenderingContext {\n private _drawCommands: any[];\n\n constructor() {\n this._drawCommands = [];\n }\n\n reset() {\n this._drawCommands = [];\n }\n\n getDrawCommands(): any[] {\n return this._drawCommands;\n }\n\n //================================================================================\n // Properties\n // TODO: Support fillStyle/strokeStyle pattern.\n // TODO: Support fillStyle/strokeStyle gradient.\n set fillStyle(value: string) {\n value = Colors.colorStringToAlphaHex(value);\n this._drawCommands.push([\"setFillStyle\", value]);\n }\n\n set strokeStyle(value: string) {\n value = Colors.colorStringToAlphaHex(value);\n this._drawCommands.push([\"setStrokeStyle\", value]);\n }\n\n set lineWidth(value: number) {\n this._drawCommands.push([\"setLineWidth\", value]);\n }\n\n set font(value: string) {\n this._drawCommands.push([\"setFont\", value]);\n }\n\n set textAlign(value: string) {\n this._drawCommands.push([\"setTextAlign\", value]);\n }\n\n //================================================================================\n // Rect functions\n fillRect(x: number, y: number, width: number, height: number): void {\n this._drawCommands.push([\"fillRect\", x, y, width, height]);\n }\n\n strokeRect(x: number, y: number, width: number, height: number): void {\n this._drawCommands.push([\"strokeRect\", x, y, width, height]);\n }\n\n strokeRoundedRect(\n x: number,\n y: number,\n width: number,\n height: number,\n cornerSize: number\n ): void {\n this._drawCommands.push([\n \"strokeRoundedRect\",\n x,\n y,\n width,\n height,\n cornerSize,\n ]);\n }\n\n fillRoundedRect(\n x: number,\n y: number,\n width: number,\n height: number,\n cornerSize: number\n ): void {\n this._drawCommands.push([\n \"fillRoundedRect\",\n x,\n y,\n width,\n height,\n cornerSize,\n ]);\n }\n\n clearRect(x: number, y: number, width: number, height: number): void {\n this._drawCommands.push([\"clearRect\", x, y, width, height]);\n }\n\n //================================================================================\n // Path functions\n //\n // TODO: Should we split things out into CanvasRenderingContextPath\n // so things like close()/stroke() are more obvious when looking at API.\n // If you look at the ts type definitions for CanvasRenderingContext2D\n // CanvasRenderingContext2D is composed of other objects like CanvasRenderingContextPath\n // which contains all path methods. What is the best way to do this in JS and share\n // a drawCommands instance?\n beginPath(): void {\n this._drawCommands.push([\"beginPath\"]);\n }\n\n lineTo(x: number, y: number): void {\n this._drawCommands.push([\"lineTo\", x, y]);\n }\n\n moveTo(x: number, y: number): void {\n this._drawCommands.push([\"moveTo\", x, y]);\n }\n\n arc(\n x: number,\n y: number,\n radius: number,\n startAngle: number,\n endAngle: number\n ): void {\n //TODO: Add support for optional antiClockWise?: boolean arg\n this._drawCommands.push([\"arc\", x, y, radius, startAngle, endAngle]);\n }\n\n quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void {\n this._drawCommands.push([\"quadraticCurveTo\", cpx, cpy, x, y]);\n }\n\n closePath(): void {\n this._drawCommands.push([\"close\"]);\n }\n\n stroke(): void {\n this._drawCommands.push([\"stroke\"]);\n }\n\n fill(): void {\n this._drawCommands.push([\"fill\"]);\n }\n\n //================================================================================\n // Transform functions\n rotate(angle: number): void {\n this._drawCommands.push([\"rotate\", angle]);\n }\n\n translate(x: number, y: number): void {\n this._drawCommands.push([\"translate\", x, y]);\n }\n\n setTransform(\n a: number,\n b: number,\n c: number,\n d: number,\n e: number,\n f: number\n ): void {\n this._drawCommands.push([\"setTransform\", a, b, c, d, e, f]);\n }\n\n resetTransform(): void {\n this._drawCommands.push([\"resetTransform\"]);\n }\n\n //================================================================================\n // Image functions\n //\n //TODO: Add support for other drawImage overloads.\n // Currently only support SVG string. What is correct\n // type to use here?\n drawImage(image: string, dx: number, dy: number): void {\n this._drawCommands.push([\"drawImage\", image, dx, dy]);\n }\n\n //================================================================================\n // Text functions\n strokeText(text: string, x: number, y: number, maxWidth?: number): void {\n if (maxWidth === undefined)\n this._drawCommands.push([\"strokeText\", text, x, y]);\n else this._drawCommands.push([\"strokeText\", text, x, y, maxWidth]);\n }\n\n fillText(text: string, x: number, y: number, maxWidth?: number): void {\n if (maxWidth === undefined)\n this._drawCommands.push([\"fillText\", text, x, y]);\n else this._drawCommands.push([\"fillText\", text, x, y, maxWidth]);\n }\n\n //================================================================================\n}\n\nexport interface CanvasProps {\n onDraw: (ctx: CanvasRenderingContext) => void;\n onMeasure?: (e: any) => void;\n stateful?: boolean;\n}\n\ninterface CanvasState {\n width: number;\n height: number;\n}\n\nexport class Canvas extends Component {\n private _ctx: CanvasRenderingContext;\n\n constructor(props: CanvasProps) {\n super(props);\n\n this._ctx = new CanvasRenderingContext();\n this._onMeasure = this._onMeasure.bind(this);\n this._onDraw = this._onDraw.bind(this);\n\n this.state = {\n width: 0,\n height: 0,\n };\n }\n\n _onMeasure(e: any) {\n this.setState({\n width: e.width,\n height: e.height,\n });\n\n if (typeof this.props.onMeasure === \"function\") {\n this.props.onMeasure(e);\n }\n }\n\n _onDraw(): any[] {\n if (typeof this.props.onDraw === \"function\") {\n this._ctx.reset();\n\n this.props.onDraw(this._ctx);\n return this._ctx.getDrawCommands();\n }\n\n return [];\n }\n\n render() {\n return React.createElement(\n \"CanvasView\",\n Object.assign({}, this.props, {\n onDraw: () => {\n return this._onDraw();\n },\n onMeasure: (e: any) => {\n this._onMeasure(e);\n },\n }),\n this.props.children\n );\n }\n}\n" }, { "path": "packages/react-juce/src/components/Image.ts", "content": "import React from \"react\";\n\nexport function Image(props: any) {\n return React.createElement(\"Image\", props, props.children);\n}\n\nImage.PlacementFlags = {\n xLeft: 1,\n xRight: 2,\n xMid: 4,\n yTop: 8,\n yBottom: 16,\n yMid: 32,\n stretchToFit: 64,\n fillDestination: 128,\n onlyReduceInSize: 256,\n onlyIncreaseInSize: 512,\n doNotResize: 256 | 512,\n centred: 4 + 32,\n};\n" }, { "path": "packages/react-juce/src/components/ListView.tsx", "content": "import React, { Component, PropsWithChildren, ReactElement } from \"react\";\n\nimport { ViewInstance } from \"../lib/Backend\";\nimport { ScrollView, ScrollEvent } from \"./ScrollView\";\n\nimport invariant from \"invariant\";\n\ntype ListViewState = {\n scrollTopPosition: number;\n width: number;\n height: number;\n};\n\ntype VirtualPositions = {\n innerHeight: number;\n startIndex: number;\n endIndex: number;\n};\n\n/**\n * ScrollParams is passed to ListView's scrollToIndex\n * function.\n *\n * @property index - The index of the item in the ListView's data\n * source to scroll to.\n *\n * @property offset - A normalised value between 0.0 and 1.0 which\n * will offset the position of the ListView item\n * (specified by index) from the top of the ListView.\n * i.e. offset == 0.5 positions the item at index in\n * the center of the ListView.\n */\nexport interface ScrollParams {\n index: number;\n offset: number;\n}\n\n/**\n * Prop type for ListView.\n *\n * @property data - Array of objects to use when populating ListView items\n * via the renderItem callback.\n *\n * @property renderItem - Callback to render a ListView item given an element\n * from the supplied data source.\n *\n * @property itemHeight - Fixed height in pixels for a single item in the\n * ListView.\n */\nexport interface ListViewProps {\n data: any[];\n renderItem: (any) => ReactElement;\n itemHeight: number;\n}\n\n/**\n * A lightweight \"virtualised list\" implementation that allows for\n * the efficient rendering of a large number of objects within a\n * ScrollView. ListView supports the full set of ScrollViewProps\n * for styling etc.\n *\n * Note, at present ListView requires the user to specify a fixed\n * itemHeight property in order to calculate which items to render\n * within the list based on scroll position. This may change in\n * future versions.\n *\n * @example\n *\n * function getListViewItems() {\n * let items = [];\n *\n * for (let i = 0; i < 5000; ++i) {\n * const name = \"Item \" + i;\n * const category = i % 2 ? \"A\" : \"B\";\n *\n * items.push({id: i, name: name, category: category});\n * }\n *\n * return items;\n * }\n *\n * }\n * itemHeight={50}\n * />\n *\n */\nexport class ListView extends Component<\n PropsWithChildren,\n ListViewState\n> {\n private _ref: React.RefObject;\n\n constructor(props: PropsWithChildren) {\n super(props);\n this._ref = React.createRef();\n\n this._onMeasure = this._onMeasure.bind(this);\n this._calculateVirtualPositions = this._calculateVirtualPositions.bind(\n this\n );\n this._setScrollTopPosition = this._setScrollTopPosition.bind(this);\n this.scrollToIndex = this.scrollToIndex.bind(this);\n\n this.state = {\n scrollTopPosition: 0,\n width: 0,\n height: 0,\n };\n }\n\n _onMeasure(e: any): void {\n this.setState({\n width: e.width,\n height: e.height,\n });\n }\n\n _calculateVirtualPositions(): VirtualPositions {\n const totalItems = this.props.data.length;\n const innerHeight = this.props.itemHeight * totalItems;\n\n invariant(\n this.props.itemHeight > 0,\n \"Zero or negative itemHeight passed to ListView\"\n );\n\n // Pad num rendered items by 1 so we always render the same number of items\n // which allows us to use a fixed key value on each item in the list.\n const numItems = Math.floor(this.state.height / this.props.itemHeight) + 1;\n\n const startIndex = Math.floor(\n this.state.scrollTopPosition / this.props.itemHeight\n );\n\n const endIndex = Math.min(totalItems - 1, startIndex + numItems);\n\n return {\n innerHeight: innerHeight,\n startIndex: startIndex,\n endIndex: endIndex,\n };\n }\n\n _setScrollTopPosition(e: ScrollEvent): void {\n this.setState({\n scrollTopPosition: e.scrollTop,\n });\n\n if (typeof this.props.onScroll === \"function\") {\n this.props.onScroll(e);\n }\n }\n\n scrollToIndex(scrollParams: ScrollParams) {\n invariant(\n scrollParams.index >= 0 && scrollParams.index <= this.props.data.length,\n \"scrollParams.index must be between 0 and props.data.length\"\n );\n\n invariant(\n scrollParams.offset >= 0.0 && scrollParams.offset <= 1.0,\n \"scrollParams.offset must be normalised between 0.0 and 1.0\"\n );\n\n const numItems = Math.floor(this.state.height / this.props.itemHeight);\n\n const xPos = 0;\n let yPos =\n this.props.itemHeight * scrollParams.index -\n this.props.itemHeight * numItems * scrollParams.offset;\n\n const scrollViewInstance = this._ref ? this._ref.current : null;\n\n if (scrollViewInstance) {\n //@ts-ignore\n scrollViewInstance.scrollToPosition(xPos, yPos);\n }\n }\n\n render() {\n const positions: VirtualPositions = this._calculateVirtualPositions();\n const items: any = [];\n\n // List items must have a key but we ensure the key remains fixed here\n // so that we simply re-render the existing views/components rather than\n // replacing them. This stops issues occuring when dynamically adding and removing\n // components inside a juce::Viewport.\n if (this.state.height > 0) {\n for (let i = positions.startIndex; i <= positions.endIndex; ++i) {\n items.push(\n this.props.renderItem(this.props.data[i], i, {\n position: \"absolute\",\n top: this.props.itemHeight * i,\n key: positions.endIndex - i,\n })\n );\n }\n }\n\n return (\n \n \n {items}\n \n \n );\n }\n}\n\nconst styles = {\n scrollViewContent: {\n flexDirection: \"column\",\n flex: 1.0,\n flexShrink: 0.0,\n },\n};\n" }, { "path": "packages/react-juce/src/components/ScrollView.ts", "content": "import React, { PropsWithChildren } from \"react\";\n\nimport invariant from \"invariant\";\n\nfunction ScrollViewContentView(props: any) {\n return React.createElement(\"ScrollViewContentView\", props, props.children);\n}\n\nfunction parseScrollbarColorProp(scrollbarColorProp: string) {\n const values = scrollbarColorProp.split(\" \");\n\n invariant(\n values.length === 2,\n 'scrollbar-color should be a space separated string with two values: \"{thumbColor} {trackColor}\".'\n );\n\n return {\n \"scrollbar-thumb-color\": values[0],\n \"scrollbar-track-color\": values[1],\n };\n}\n\nfunction parseScrollbarWidthProp(scrollBarWidthProp: string | number) {\n invariant(\n typeof scrollBarWidthProp === \"string\" ||\n typeof scrollBarWidthProp === \"number\",\n \"scrollbar-width should be a string or a number.\"\n );\n\n let props = {};\n\n if (typeof scrollBarWidthProp === \"string\") {\n switch (scrollBarWidthProp) {\n // JUCE's look and feel V2 uses 18px as default scrollbar thickness.\n case \"auto\":\n props[\"scrollbar-width\"] = 18;\n return props;\n case \"thin\":\n props[\"scrollbar-width\"] = 9;\n return props;\n case \"none\":\n props[\"overflow-x\"] = \"hidden\";\n props[\"overflow-y\"] = \"hidden\";\n props[\"scroll-on-drag\"] = true;\n return props;\n default:\n invariant(\n false,\n \"scrollbar-width as string should be one of 'auto', 'thin' or 'none'\"\n );\n }\n }\n\n props[\"scrollbar-width\"] = scrollBarWidthProp;\n\n return props;\n}\n\nfunction parseOverflowProp(\n overflowProp: string | undefined,\n overflowXProp: string | undefined,\n overflowYProp: string | undefined\n) {\n let props = {};\n\n props[\"overflow-x\"] = overflowXProp || overflowProp;\n props[\"overflow-y\"] = overflowYProp || overflowProp;\n\n return props;\n}\n\nexport interface ScrollEvent {\n scrollTop: number;\n scrollLeft: number;\n}\n\nexport interface ScrollViewProps {\n overflow?: string;\n \"overflow-x\"?: string;\n \"overflow-y\"?: string;\n \"scrollbar-color\"?: string;\n \"scrollbar-width\"?: string | number;\n \"scroll-on-drag\"?: boolean;\n onScroll: (e: ScrollEvent) => void;\n}\n\n//TODO: Remove any once ViewProps typed\nexport function ScrollView(props: PropsWithChildren) {\n const child = React.Children.only(props.children);\n\n invariant(\n child && child[\"type\"] === ScrollViewContentView,\n \"ScrollView must have only one child, and that child must be a ScrollView.ContentView.\"\n );\n\n // Unpack non-native props\n let {\n overflow,\n \"scrollbar-color\": scrollbarColor,\n \"scrollbar-width\": scrollBarWidth,\n ...other\n } = props;\n\n if (typeof scrollbarColor !== \"undefined\")\n Object.assign(other, parseScrollbarColorProp(scrollbarColor));\n\n if (typeof scrollBarWidth !== \"undefined\")\n Object.assign(other, parseScrollbarWidthProp(scrollBarWidth));\n\n if (typeof overflow !== \"undefined\")\n Object.assign(\n other,\n parseOverflowProp(overflow, other[\"overflow-x\"], other[\"overflow-y\"])\n );\n\n return React.createElement(\"ScrollView\", other, child);\n}\n\nScrollView.ContentView = ScrollViewContentView;\n" }, { "path": "packages/react-juce/src/components/Slider.tsx", "content": "import React, { Component, PropsWithChildren } from \"react\";\nimport invariant from \"invariant\";\n\nimport { Canvas, CanvasRenderingContext } from \"./Canvas\";\nimport { View } from \"./View\";\nimport { SyntheticMouseEvent } from \"../lib/SyntheticEvents\";\n\n// Some simple helpers for slider drag gesture -> value mapping\nconst _linearHorizontalGestureMap = (\n mouseDownX: number,\n mouseDownY: number,\n sensitivity: number,\n valueAtDragStart: number,\n dragEvent: SyntheticMouseEvent\n): number => {\n const dx = dragEvent.x - mouseDownX;\n return Math.max(0.0, Math.min(1.0, valueAtDragStart + dx * sensitivity));\n};\n\nconst _linearVerticalGestureMap = (\n mouseDownX: number,\n mouseDownY: number,\n sensitivity: number,\n valueAtDragStart: number,\n dragEvent: SyntheticMouseEvent\n): number => {\n const dy = dragEvent.y - mouseDownY;\n return Math.max(0.0, Math.min(1.0, valueAtDragStart - dy * sensitivity));\n};\n\nconst _rotaryGestureMap = (\n mouseDownX: number,\n mouseDownY: number,\n sensitivity: number,\n valueAtDragStart: number,\n dragEvent: SyntheticMouseEvent\n): number => {\n const dx = dragEvent.x - mouseDownX;\n const dy = mouseDownY - dragEvent.y;\n return Math.max(\n 0.0,\n Math.min(1.0, valueAtDragStart + (dx + dy) * sensitivity)\n );\n};\n\nconst _drawLinearHorizontalSlider = (trackColor: string, fillColor: string) => {\n return (\n ctx: CanvasRenderingContext,\n width: number,\n height: number,\n value: number\n ): void => {\n const lineWidth = 2.0;\n\n const x = 0 + lineWidth / 2;\n const y = 0 + lineWidth / 2;\n\n width = width - lineWidth;\n height = height - lineWidth;\n\n const fillWidth = value * width;\n\n ctx.lineWidth = lineWidth;\n ctx.strokeStyle = trackColor;\n ctx.fillStyle = fillColor;\n\n ctx.fillRect(x, y, fillWidth, height);\n ctx.strokeRect(x, y, width, height);\n };\n};\n\nconst _drawLinearVerticalSlider = (trackColor: string, fillColor: string) => {\n return (\n ctx: CanvasRenderingContext,\n width: number,\n height: number,\n value: number\n ): void => {\n const lineWidth = 2.0;\n\n const x = 0 + lineWidth / 2;\n const y = 0 + lineWidth / 2;\n\n width = width - lineWidth;\n height = height - lineWidth;\n\n const fillHeight = value * height;\n const fillY = y + (height - fillHeight);\n\n ctx.lineWidth = lineWidth;\n ctx.strokeStyle = trackColor;\n ctx.fillStyle = fillColor;\n\n ctx.fillRect(x, fillY, width, fillHeight);\n ctx.strokeRect(x, y, width, height);\n };\n};\n\nfunction _drawArc(\n ctx,\n centerX,\n centerY,\n radius,\n arcSize,\n startAngle,\n endAngle,\n lineWidth\n) {\n const deltaX = centerX;\n const deltaY = centerY;\n\n const rotateAngle = ((180 + 180 * (1 - arcSize)) * Math.PI) / 180;\n\n ctx.lineWidth = lineWidth;\n\n ctx.beginPath();\n ctx.moveTo(centerX - lineWidth / 2, 0);\n ctx.arc(\n centerX - lineWidth / 2,\n centerY - lineWidth / 2,\n radius,\n startAngle,\n endAngle\n );\n\n ctx.translate(deltaX, deltaY);\n ctx.rotate(rotateAngle);\n ctx.translate(-deltaX, -deltaY);\n\n ctx.stroke();\n ctx.resetTransform();\n}\n\nconst _drawRotarySlider = (trackColor, fillColor) => {\n return (ctx, width, height, value) => {\n const lineWidth = 3;\n const arcSize = 0.8;\n\n const radius = Math.min(width, height) * 0.5 - lineWidth / 2;\n\n const centerX = width / 2;\n const centerY = height / 2;\n\n const strokeStart = 0;\n const strokeEnd = 2 * Math.PI * arcSize;\n\n const fillStart = -(2.5 * Math.PI * arcSize);\n const fillEnd = fillStart + value * (2 * Math.PI * arcSize);\n\n ctx.strokeStyle = trackColor;\n _drawArc(\n ctx,\n centerX,\n centerY,\n radius,\n arcSize,\n strokeStart,\n strokeEnd,\n lineWidth\n );\n\n ctx.strokeStyle = fillColor;\n _drawArc(\n ctx,\n centerX,\n centerY,\n radius,\n arcSize,\n fillStart,\n fillEnd,\n lineWidth\n );\n };\n};\n\nexport interface SliderProps {\n value?: number;\n sensitivity?: number;\n onChange?: (value: number) => void;\n onDraw?: (\n ctx: CanvasRenderingContext,\n width: number,\n height: number,\n value: number\n ) => void;\n mapDragGestureToValue?: (\n mouseDownX: number,\n mouseDownY: number,\n sensitivity: number,\n valueAtDragStart: number,\n dragEvent: SyntheticMouseEvent\n ) => number;\n}\n\ntype SliderState = {\n width: number;\n height: number;\n value: number;\n};\n\n/**\n * A generic slider component which can be used as a building block for more complex\n * sliders.\n *\n * Slider takes an onDraw function prop for rendering the Slider using a CanvasRenderingContext.\n * Slider also accepts a mapDragGestureToValue pop which allows customisation when converting mouse drag\n * positions/events to the Slider's normalised value reported via the onChange prop callback.\n *\n * Some default onDraw and mapDragGestureToValue implementations are provided:\n * @see Slider.drawLinearHorizontal\n * @see Slider.drawLinearVertical\n * @see Slider.drawRotary\n *\n * @see Slider.linearHorizontalGestureMap\n * @see Slider.linearVerticalGestureMap\n * @see Slider.rotaryGestureMap\n *\n * @example\n *\n * console.log(\"Slider value changed: \" + value)}\n * onDraw={Slider.drawRotary('ff66FDCF', 'ff626262')}\n * mapDragGestureToValue={Slider.rotaryGestureMap}\n * />\n *\n */\nexport class Slider extends Component<\n PropsWithChildren,\n SliderState\n> {\n static linearHorizontalGestureMap = _linearHorizontalGestureMap;\n static linearVerticalGestureMap = _linearVerticalGestureMap;\n static rotaryGestureMap = _rotaryGestureMap;\n\n static drawLinearHorizontal = _drawLinearHorizontalSlider;\n static drawLinearVertical = _drawLinearVerticalSlider;\n static drawRotary = _drawRotarySlider;\n\n private _valueAtDragStart = 0.0;\n private _mouseDownX = 0;\n private _mouseDownY = 0;\n\n static defaultProps = {\n sensitivity: 1 / 200,\n onDraw: _drawRotarySlider(\"ff626262\", \"ff66FDCF\"),\n mapDragGestureToValue: _rotaryGestureMap,\n };\n\n constructor(props: PropsWithChildren) {\n super(props);\n\n this._onMeasure = this._onMeasure.bind(this);\n this._onMouseDown = this._onMouseDown.bind(this);\n this._onMouseDrag = this._onMouseDrag.bind(this);\n this._onDraw = this._onDraw.bind(this);\n\n this.state = {\n width: 0,\n height: 0,\n value: 0.0,\n };\n }\n\n _onMeasure(e: any) {\n this.setState({\n width: e.width,\n height: e.height,\n });\n }\n\n _onMouseDown(e: SyntheticMouseEvent) {\n this._valueAtDragStart = this.props.hasOwnProperty(\"value\")\n ? this.props.value\n : this.state.value;\n\n this._mouseDownX = e.x;\n this._mouseDownY = e.y;\n\n if (typeof this.props.onMouseDown === \"function\") {\n this.props.onMouseDown(e);\n }\n }\n\n _onMouseDrag(e: SyntheticMouseEvent) {\n let value = 0.0;\n\n if (typeof this.props.mapDragGestureToValue !== \"function\") {\n invariant(false, \"Invalid gesture mapping function supplied.\");\n return;\n }\n\n value = this.props.mapDragGestureToValue(\n this._mouseDownX,\n this._mouseDownY,\n this.props.sensitivity,\n this._valueAtDragStart,\n e\n );\n\n if (!this.props.hasOwnProperty(\"value\")) {\n this.setState({\n value: value,\n });\n }\n\n if (typeof this.props.onChange === \"function\") {\n this.props.onChange(value);\n }\n\n if (typeof this.props.onMouseDrag === \"function\") {\n this.props.onMouseDrag(e);\n }\n }\n\n _onDraw(ctx: CanvasRenderingContext) {\n const value = this.props.hasOwnProperty(\"value\")\n ? this.props.value\n : this.state.value;\n\n if (typeof this.props.onDraw === \"function\") {\n return this.props.onDraw(ctx, this.state.width, this.state.height, value);\n }\n }\n\n render() {\n return (\n \n \n {this.props.children}\n \n );\n }\n}\n\nconst styles = {\n canvas: {\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n interceptClickEvents: false,\n },\n};\n" }, { "path": "packages/react-juce/src/components/Text.ts", "content": "import React from \"react\";\n\nexport function Text(props: any) {\n return React.createElement(\"Text\", props, props.children);\n}\n\nText.WordWrap = {\n none: 0,\n byWord: 1,\n byChar: 2,\n};\n\nText.FontStyleFlags = {\n plain: 0,\n bold: 1,\n italic: 2,\n underlined: 4,\n};\n\nText.JustificationFlags = {\n left: 1,\n right: 2,\n horizontallyCentred: 4,\n top: 8,\n bottom: 16,\n verticallyCentred: 32,\n horizontallyJustified: 64,\n centred: 36,\n centredLeft: 33,\n centredRight: 34,\n centredTop: 12,\n centredBottom: 20,\n topLeft: 9,\n topRight: 10,\n bottomLeft: 17,\n bottomRight: 18,\n};\n" }, { "path": "packages/react-juce/src/components/TextInput.tsx", "content": "import React, { PropsWithChildren } from \"react\";\n\nexport interface InputEvent {\n value: string;\n}\n\nexport interface ChangeEvent {\n value: string;\n}\n\nexport interface TextInputProps {\n value?: string;\n\n color?: string;\n fontSize?: number;\n fontStyle?: number;\n fontFamily?: string;\n justification?: number;\n \"kerning-factor\"?: number;\n\n placeholder?: string;\n \"placeholder-color\"?: string;\n maxlength?: number;\n readonly?: boolean;\n \"outline-color\"?: string;\n \"focused-outline-color\"?: string;\n \"highlighted-text-color\"?: string;\n \"highlight-color\"?: string;\n \"caret-color\"?: string;\n\n onChange?: (e: ChangeEvent) => void;\n onInput?: (e: InputEvent) => void;\n}\n\nexport function TextInput(props: PropsWithChildren) {\n return React.createElement(\"TextInput\", props, props.children);\n}\n" }, { "path": "packages/react-juce/src/components/View.ts", "content": "import React from \"react\";\n\n// We'll need to wrap the default native components in stuff like this so that\n// you can use in your JSX. Otherwise we need the dynamic friendliness\n// of the createElement call (note that the type is a string...);\nexport function View(props: any) {\n return React.createElement(\"View\", props, props.children);\n}\n\nView.ClickEventFlags = {\n disableClickEvents: 0,\n allowClickEvents: 1,\n allowClickEventsExcludingChildren: 2,\n allowClickEventsOnlyOnChildren: 3,\n};\n\nView.EasingFunctions = {\n linear: 0,\n quadraticIn: 1,\n quadraticOut: 2,\n quadraticInOut: 3,\n};\n" }, { "path": "packages/react-juce/src/index.tsx", "content": "/** Polyfill ES2015 data structures with core-js. */\nimport \"core-js/es6/set\";\nimport \"core-js/es6/map\";\n\nimport Backend from \"./lib/Backend\";\nimport Renderer, { TracedRenderer } from \"./lib/Renderer\";\n\nexport { default as EventBridge } from \"./lib/EventBridge\";\n\nexport * from \"./components/View\";\nexport * from \"./components/ScrollView\";\nexport * from \"./components/Canvas\";\nexport * from \"./components/Text\";\nexport * from \"./components/TextInput\";\nexport * from \"./components/Image\";\nexport * from \"./components/Button\";\nexport * from \"./components/Slider\";\nexport * from \"./components/ListView\";\nexport * from \"./lib/SyntheticEvents\";\n\nlet __renderStarted = false;\nlet __preferredRenderer = Renderer;\n\nexport default {\n getRootContainer() {\n return Backend.getRootContainer();\n },\n\n render(\n element: any,\n container: any,\n callback?: () => void | null | undefined\n ) {\n console.log(\"Render started...\");\n\n // Create a root Container if it doesnt exist\n if (!container._rootContainer) {\n //TODO: Double check passing false for final param \"hydrate correct\"\n container._rootContainer = __preferredRenderer.createContainer(\n container,\n false,\n false\n );\n }\n\n // Update the root Container\n return __preferredRenderer.updateContainer(\n element,\n container._rootContainer,\n null,\n // TODO: callback in __preferredRenderer.updateContainer is not optional.\n // @ts-ignore\n callback\n );\n },\n\n enableMethodTrace() {\n if (__renderStarted) {\n throw new Error(\"Cannot enable method trace after initial render.\");\n }\n\n __preferredRenderer = TracedRenderer;\n },\n};\n" }, { "path": "packages/react-juce/src/lib/Backend.ts", "content": "import { all as allCssProps } from \"known-css-properties\";\nimport camelCase from \"camelcase\";\nimport NativeMethods from \"./NativeMethods\";\nimport SyntheticEvents, {\n SyntheticMouseEvent,\n SyntheticKeyboardEvent,\n} from \"./SyntheticEvents\";\nimport { macroPropertyGetters } from \"./MacroProperties\";\nimport Colors from \"./MacroProperties/Colors\";\n\n//TODO: Keep this union or introduce a common base class ViewInstanceBase?\nexport type Instance = ViewInstance | RawTextViewInstance;\n\nlet __rootViewInstance: ViewInstance | null = null;\nlet __viewRegistry: Map = new Map();\nlet __lastMouseDownViewId: string | null = null;\n\n// get any css properties not beginning with a \"-\",\n// and build a map from any camelCase versions to\n// the hyphenated version\nconst cssPropsMap = allCssProps\n .filter((s) => !s.startsWith(\"-\") && s.includes(\"-\"))\n .reduce((acc, v) => Object.assign(acc, { [camelCase(v)]: v }), {});\n\nexport class ViewInstance {\n private _id: string;\n private _type: string;\n public _children: Instance[];\n public _props: any = null;\n public _parent: any = null;\n\n constructor(id: string, type: string, props?: any, parent?: ViewInstance) {\n this._id = id;\n this._type = type;\n this._children = [];\n this._props = props;\n this._parent = parent;\n\n //TODO: This has been added to resolve a bug in\n // our Button component when calling contains()\n // on a viewRef. This is a result of wrapping our\n // viewRefs in a Proxy object which means this is\n // no longer bound to the original ViewInstance object\n // during the contains call. Ideally we would use Reflect.get()\n // here but Duktape does not fully support Reflect at the moment.\n this.contains = this.contains.bind(this);\n }\n\n getViewId(): string {\n return this._id;\n }\n\n getType(): string {\n return this._type;\n }\n\n getChildIndex(childInstance: Instance): number {\n for (let i = 0; i < this._children.length; ++i) {\n if (this._children[i] === childInstance) {\n return i;\n }\n }\n\n return -1;\n }\n\n appendChild(childInstance: Instance): any {\n childInstance._parent = this;\n\n this._children.push(childInstance);\n\n //@ts-ignore\n return NativeMethods.insertChild(this._id, childInstance._id, -1);\n }\n\n insertChild(childInstance: Instance, index: number): any {\n childInstance._parent = this;\n\n this._children.splice(index, 0, childInstance);\n\n //@ts-ignore\n return NativeMethods.insertChild(this._id, childInstance._id, index);\n }\n\n removeChild(childInstance: Instance): any {\n const index = this._children.indexOf(childInstance);\n\n if (index >= 0) {\n this._children.splice(index, 1);\n\n __viewRegistry.delete(childInstance.getViewId());\n\n //@ts-ignore\n return NativeMethods.removeChild(this._id, childInstance._id);\n }\n }\n\n setProperty(propKey: string, value: any): any {\n // if the supplied propkey is a camelCase equivalent\n // of a css prop, first convert it to kebab-case\n propKey = cssPropsMap[propKey] || propKey;\n\n // convert provided color string to alpha-hex code for JUCE\n let nativeValue;\n if (Colors.isColorProperty(propKey)) {\n value = Colors.colorStringToAlphaHex(value);\n if (value.startsWith(\"linear-gradient\")) {\n nativeValue = Colors.convertLinearGradientStringToNativeObject(value);\n }\n }\n\n this._props = Object.assign({}, this._props, {\n [propKey]: value,\n });\n\n // Our React Ref equivalent. This is needed\n // as it appears the 'ref' prop isn't passed through\n // to our renderer's setProperty from the reconciler.\n // We wrap the ViewInstance in a proxy object here to allow\n // invocation of native ViewInstance methods via React refs.\n // If a property is not present on the ViewInstance object\n // we assume the caller is attempting to access/invoke a\n // native View method.\n if (propKey === \"viewRef\") {\n value.current = new Proxy(this, {\n get: function (target, prop, receiver) {\n if (prop in target) {\n return target[prop];\n }\n\n return function (...args) {\n //@ts-ignore\n return NativeMethods.invokeViewMethod(target._id, prop, ...args);\n };\n },\n });\n\n return;\n }\n\n if (macroPropertyGetters.hasOwnProperty(propKey)) {\n //@ts-ignore\n for (const [k, v] of macroPropertyGetters[propKey](value))\n NativeMethods.setViewProperty(this._id, k, v);\n return;\n }\n //@ts-ignore\n return NativeMethods.setViewProperty(\n this._id,\n propKey,\n nativeValue ? nativeValue : value\n );\n }\n\n contains(node: Instance): boolean {\n if (node === this) {\n return true;\n }\n\n for (let i = 0; i < this._children.length; ++i) {\n const child = this._children[i];\n\n // A ViewInstance may hold RawTextViewInstances but a\n // RawTextViewInstance contains no children.\n if (child instanceof ViewInstance && child.contains(node)) return true;\n }\n\n return false;\n }\n}\n\nexport class RawTextViewInstance {\n private _id: string;\n private _text: string;\n public _parent: ViewInstance;\n\n constructor(id: string, text: string, parent: ViewInstance) {\n this._id = id;\n this._text = text;\n this._parent = parent;\n }\n\n getViewId(): string {\n return this._id;\n }\n\n getText() {\n return this._text;\n }\n\n setTextValue(text: string): any {\n this._text = text;\n //@ts-ignore\n return NativeMethods.setRawTextValue(this._id, text);\n }\n}\n\nfunction __getRootContainer(): ViewInstance {\n if (__rootViewInstance !== null) return __rootViewInstance;\n\n //@ts-ignore\n const id = NativeMethods.getRootInstanceId();\n __rootViewInstance = new ViewInstance(id, \"View\");\n\n return __rootViewInstance;\n}\n\nfunction __hasFunctionProp(view: ViewInstance, prop: string) {\n return (\n view._props.hasOwnProperty(prop) && typeof view._props[prop] === \"function\"\n );\n}\n\nfunction __callEventHandlerIfPresent(\n view: Instance,\n eventType: string,\n event: any\n) {\n if (view instanceof ViewInstance && __hasFunctionProp(view, eventType)) {\n view._props[eventType](event);\n }\n}\n\nfunction __bubbleEvent(view: Instance, eventType: string, event: any): void {\n if (view && view !== __getRootContainer()) {\n // Always call the event callback on the target before bubbling.\n // Some events may not bubble or have bubble defined. i.e. onMeasure\n __callEventHandlerIfPresent(view, eventType, event);\n\n if (event.bubbles) __bubbleEvent(view._parent, eventType, event);\n }\n}\n\n//@ts-ignore\nNativeMethods.dispatchViewEvent = function dispatchEvent(\n viewId: string,\n eventType: string,\n event: any\n) {\n if (__viewRegistry.hasOwnProperty(viewId)) {\n const instance = __viewRegistry[viewId];\n\n // Convert target/relatedTarget to concrete ViewInstance refs\n if (event.target && __viewRegistry.hasOwnProperty(event.target)) {\n event.target = __viewRegistry[event.target];\n }\n\n if (\n event.relatedTarget &&\n __viewRegistry.hasOwnProperty(event.relatedTarget)\n ) {\n event.relatedTarget = __viewRegistry[event.relatedTarget];\n }\n\n // Convert native event object into it's SyntheticEvent equivalent if required.\n if (SyntheticEvents.isMouseEventHandler(eventType))\n event = new SyntheticMouseEvent(event);\n else if (SyntheticEvents.isKeyboardEventHandler(eventType))\n event = new SyntheticKeyboardEvent(event);\n\n // If mouseDown event we store the target viewId as the last view\n // to recieve a mouseDown for \"onClick\" book-keeping.\n if (eventType === \"onMouseDown\") {\n __lastMouseDownViewId = viewId;\n __bubbleEvent(instance, eventType, event);\n return;\n }\n\n if (eventType === \"onMouseUp\") {\n __bubbleEvent(instance, eventType, event);\n\n if (__lastMouseDownViewId && viewId === __lastMouseDownViewId) {\n __lastMouseDownViewId = null;\n __bubbleEvent(instance, \"onClick\", event);\n }\n return;\n }\n\n __bubbleEvent(instance, eventType, event);\n }\n};\n\nexport default {\n getRootContainer(): ViewInstance {\n return __getRootContainer();\n },\n createViewInstance(\n viewType: string,\n props: any,\n parentInstance: ViewInstance\n ): ViewInstance {\n //@ts-ignore\n const id = NativeMethods.createViewInstance(viewType);\n const instance = new ViewInstance(id, viewType, props, parentInstance);\n\n __viewRegistry[id] = instance;\n return instance;\n },\n createTextViewInstance(text: string, parentInstance: ViewInstance) {\n //@ts-ignore\n const id = NativeMethods.createTextViewInstance(text);\n const instance = new RawTextViewInstance(id, text, parentInstance);\n\n __viewRegistry[id] = instance;\n return instance;\n },\n resetAfterCommit() {\n //@ts-ignore\n return NativeMethods.resetAfterCommit();\n },\n};\n" }, { "path": "packages/react-juce/src/lib/EventBridge.ts", "content": "import EventEmitter from \"events\";\nimport NativeMethods from \"./NativeMethods\";\n\nconst EventBridge = new EventEmitter.EventEmitter();\nEventBridge.setMaxListeners(30);\n\n// An internal hook for the native side, from which we propagate events through\n// the EventEmitter interface.\n// @ts-ignore\nNativeMethods.dispatchEvent = function dispatchEvent(\n eventType: string,\n ...args: any\n): void {\n EventBridge.emit(eventType, ...args);\n};\n\nexport default EventBridge;\n" }, { "path": "packages/react-juce/src/lib/MacroProperties/Colors.ts", "content": "import ColorString from \"color-string\";\nimport ColorNames from \"color-name\";\n\nconst COLOR_PROPERTIES = [\"border-color\", \"background-color\", \"color\"];\n\nconst isColorProperty = (propKey: string): boolean => {\n return COLOR_PROPERTIES.includes(propKey);\n};\n\nconst colorStringToAlphaHex = (colorString: string): string => {\n //From Hex\n if (colorString.startsWith(\"#\") && colorString.length === 7) {\n return `ff${colorString}`.replace(\"#\", \"\");\n }\n //From RGB or RGBA\n else if (colorString.startsWith(\"rgb\")) {\n const rgbValues = colorString\n .split(\"(\")[1]\n .split(\")\")[0]\n .replace(/ /g, \"\")\n .split(\",\");\n const alphaValue =\n rgbValues.length === 4\n ? //@ts-ignore\n percentToHex(100 * rgbValues.pop())\n : \"ff\";\n const hex = rgbValues.map((color) => {\n const hex = Number.parseInt(color).toString(16);\n return hex.length == 1 ? \"0\" + hex : hex;\n });\n return alphaValue + hex.join(\"\");\n }\n //From HSL or HSLA\n else if (colorString.startsWith(\"hsl\")) {\n const hslValues = colorString\n .split(\"(\")[1]\n .split(\")\")[0]\n .replace(/ |[%]/g, \"\")\n .split(\",\");\n const alphaValue =\n hslValues.length === 4\n ? //@ts-ignore\n percentToHex(100 * hslValues.pop())\n : \"ff\";\n const hex = hslToHex(\n Number.parseInt(hslValues[0]),\n Number.parseInt(hslValues[1]),\n Number.parseInt(hslValues[2])\n );\n return alphaValue + hex;\n }\n //From Linear Gradient\n else if (colorString.startsWith(\"linear-gradient\")) {\n const lgValues = colorString\n .split(/\\((.+)/)[1]\n .split(/\\)$/)[0]\n .split(/,+(?![^\\(]*\\))/)\n .map((item) => {\n return item.split(\" \");\n });\n //concat any arrays that contain hsl or rba strings\n lgValues.forEach((itemArr, idx) => {\n if (itemArr.find((item) => item.includes(\"(\")) !== undefined) {\n const itemArrClone = itemArr.slice();\n const startIdx = itemArrClone.findIndex((item) => item.includes(\"(\"));\n const endIdx = itemArrClone.findIndex((item) => item.includes(\")\"));\n const colorHSLRGB = itemArrClone.slice(startIdx, endIdx + 1).join(\"\");\n itemArr.splice(startIdx, endIdx + 1, colorHSLRGB);\n lgValues[idx] = itemArr;\n } else {\n lgValues[idx] = itemArr;\n }\n });\n //flatten array\n const lgValuesCleaned: Array = [].concat\n // @ts-ignore\n .apply([], lgValues)\n .filter((item) => {\n return item != \"\";\n });\n //converts any colorStrings in linear gradient to alpha-hex\n let skipCurrentIdx = -1;\n const lgValuesConverted = lgValuesCleaned\n .map((value, idx) => {\n if (skipCurrentIdx == idx) return;\n // @ts-ignore\n let convertedColorString = colorStringToAlphaHex(value);\n //check if the next element is a percent and attach to current and remove it\n const nextIdx = idx + 1;\n if (\n lgValuesCleaned[nextIdx] !== undefined &&\n lgValuesCleaned[nextIdx].includes(\"%\") &&\n !lgValuesCleaned[nextIdx].includes(\"(\")\n ) {\n convertedColorString += lgValuesCleaned[nextIdx];\n skipCurrentIdx = nextIdx;\n }\n return convertedColorString;\n })\n .filter((item) => {\n return item !== undefined;\n });\n return \"linear-gradient(\" + lgValuesConverted.join(\",\") + \")\";\n }\n //From Named Colours\n else if (Object.keys(ColorNames).includes(colorString)) {\n const rgbValues = ColorString.get.rgb(colorString);\n const hex = ColorString.to.hex(rgbValues);\n return colorStringToAlphaHex(hex);\n } else {\n return colorString;\n }\n};\n\nconst convertLinearGradientStringToNativeObject = (\n lgColorStringHex: string\n): object => {\n const linearGradientNativeObject = {};\n const lgValues = lgColorStringHex\n .split(/\\((.+)/)[1]\n .split(/\\)$/)[0]\n .replace(/ /g, \"\")\n .split(/,+(?![^\\(]*\\))/);\n //Check for directional words\n let angle: number = 0;\n let rotation: string = lgValues[0];\n if (rotation == \"toleft\") angle = 270;\n if (rotation == \"toright\") angle = 90;\n if (rotation == \"tobottom\") angle = 180;\n if (rotation == \"totop\") angle = 0;\n\n //These are not the exact match to CSS as boundary dimensions are required for calculation\n if (rotation == \"totopleft\" || rotation == \"tolefttop\") angle = 295;\n if (rotation == \"totopright\" || rotation == \"torighttop\") angle = 45;\n if (rotation == \"tobottomright\" || rotation == \"torightbottom\") angle = 115;\n if (rotation == \"tobottomleft\" || rotation == \"toleftbottom\") angle = 205;\n\n //Check for Turns\n if (rotation.includes(\"turn\")) {\n rotation = rotation.replace(\"turn\", \"\");\n const turns: number = parseFloat(rotation);\n angle = 360 * turns;\n }\n //Check for Degrees\n if (rotation.includes(\"deg\")) {\n rotation = rotation.replace(\"deg\", \"\");\n angle = parseInt(rotation);\n }\n\n linearGradientNativeObject[\"angle\"] = angle;\n linearGradientNativeObject[\"colours\"] = [];\n const colorPositions: Array = lgValues.slice(1);\n\n colorPositions.forEach((colorPos, idx) => {\n const hexPosObj = { id: idx };\n const hex = colorPos.slice(0, 8);\n //check string is an alpha hex\n const isValidAlphaHex =\n // @ts-ignore\n hex.match(\n /^[0-9a-fA-F]{8}$|#[0-9a-fA-F]{6}$|#[0-9a-fA-F]{4}$|#[0-9a-fA-F]{3}$/\n ).length > 0;\n if (!isValidAlphaHex) return;\n colorPos = colorPos.replace(hex, \"\");\n if (colorPos.includes(\"%\")) {\n colorPos = colorPos.replace(\"%\", \"\");\n // @ts-ignore\n let colorPercent = parseInt(colorPos) / 100;\n //check if previous percent is greater or equal to the current\n if (linearGradientNativeObject[\"colours\"].length > 0) {\n const previousPos =\n linearGradientNativeObject[\"colours\"][idx - 1][\"position\"];\n if (previousPos >= colorPercent) colorPercent = previousPos + 0.001;\n }\n hexPosObj[\"position\"] = colorPercent;\n } else {\n if (idx == 0) {\n hexPosObj[\"position\"] = 0.0;\n } else if (idx == colorPositions.length - 1) {\n hexPosObj[\"position\"] = 1.0;\n }\n //assign null and iterate over again later\n else {\n hexPosObj[\"position\"] = undefined;\n }\n }\n hexPosObj[\"hex\"] = hex;\n linearGradientNativeObject[\"colours\"].push(hexPosObj);\n });\n //Find half way between previous and next given percent if no percentage assigned\n linearGradientNativeObject[\"colours\"].forEach((colorPos, idx) => {\n if (colorPos[\"position\"] === undefined) {\n //find next color with percentage\n const colorsClone = JSON.parse(\n JSON.stringify(linearGradientNativeObject[\"colours\"])\n );\n let currentArrayChunk = colorsClone.splice(idx);\n const nextColorPercent = currentArrayChunk.find(\n (colorPos) => colorPos[\"position\"] != undefined && colorPos[\"id\"] !== 0\n );\n const nextColorPercentIdx = currentArrayChunk.findIndex(\n (colorPos) => colorPos[\"position\"] != undefined && colorPos[\"id\"] !== 0\n );\n currentArrayChunk = currentArrayChunk.splice(0, nextColorPercentIdx + 1);\n const previousColorPercent = colorsClone[idx - 1];\n const y = nextColorPercent[\"position\"];\n const x = previousColorPercent[\"position\"];\n const n = currentArrayChunk.length + 1;\n //assign evenly distributed values to each undefined color in current array chunk\n currentArrayChunk.forEach((colorPosChunk, idx) => {\n idx += 1;\n if (colorPosChunk[\"position\"] === undefined) {\n const colorPosition = x + ((y - x) / (n - 1)) * idx;\n const colorPosObj =\n linearGradientNativeObject[\"colours\"][colorPosChunk[\"id\"]];\n colorPosObj[\"position\"] = colorPosition;\n }\n });\n }\n });\n return linearGradientNativeObject;\n};\n\nconst hslToHex = (h: number, s: number, l: number): string => {\n l /= 100;\n const a = (s * Math.min(l, 1 - l)) / 100;\n const f = (n) => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color)\n .toString(16)\n .padStart(2, \"0\");\n };\n return `${f(0)}${f(8)}${f(4)}`;\n};\n\nconst percentToHex = (p: number): string => {\n p = p > 100 ? 100 : p;\n const intValue = Math.round((p / 100) * 255);\n const hexValue = intValue.toString(16);\n return hexValue.padStart(2, \"0\").toLowerCase();\n};\n\nexport default {\n isColorProperty,\n colorStringToAlphaHex,\n convertLinearGradientStringToNativeObject,\n};\n" }, { "path": "packages/react-juce/src/lib/MacroProperties/Transform.ts", "content": "import { TPropertyAssignment } from \"./types\";\nimport { getMacroCalls } from \"./util\";\nimport matrix from \"matrix-js\";\n\nconst rotateMultipliers = {\n deg: Math.PI / 180.0,\n grad: Math.PI / 200.0,\n rad: 1,\n turn: 2 * Math.PI,\n};\n\nconst angleUnitMatcher = new RegExp(\n `(-?[0-9]*\\.?[0-9]+)(${Object.keys(rotateMultipliers).join(\"|\")}|)$`\n);\n\nconst toRadians = (arg: string) => {\n // @ts-ignore\n let [, angle, unit] = angleUnitMatcher.exec(arg);\n let angleFloat = parseFloat(angle);\n if (angleFloat === NaN) return NaN;\n if (unit === \"\" && angleFloat !== 0) return NaN;\n angleFloat *= rotateMultipliers[unit] || 1;\n return angleFloat;\n};\n\nconst stringArgsToFloat = (...args: string[]) => args.map(parseFloat);\nconst stringArgsToRadians = (...args: string[]) => args.map(toRadians);\n\nconst identity = matrix([\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1],\n]);\n\nconst rotate3d = (x: number, y: number, z: number, theta: number) => {\n const sinTheta = Math.sin(theta);\n const cosTheta = Math.cos(theta);\n const r = Math.sqrt(x ** 2 + y ** 2 + z ** 2);\n if (r === 0) {\n return identity;\n }\n const [u, v, w] = [x / r, y / r, z / r];\n\n return matrix([\n [\n cosTheta + (1 - cosTheta) * u ** 2,\n u * v * (1 - cosTheta) - w * sinTheta,\n u * w * (1 - cosTheta) + v * sinTheta,\n 0,\n ],\n [\n v * u * (1 - cosTheta) + w * sinTheta,\n cosTheta + (1 - cosTheta) * v ** 2,\n v * w * (1 - cosTheta) - u * sinTheta,\n 0,\n ],\n [\n w * u * (1 - cosTheta) - v * sinTheta,\n w * v * (1 - cosTheta) + u * sinTheta,\n cosTheta + (1 - cosTheta) * w ** 2,\n 0,\n ],\n [0, 0, 0, 1],\n ]);\n};\n\nconst rotateX = (theta: number) => rotate3d(1, 0, 0, theta);\nconst rotateY = (theta: number) => rotate3d(0, 1, 0, theta);\nconst rotateZ = (theta: number) => rotate3d(0, 0, 1, theta);\n\nconst scale3d = (sx = 1, sy = 1, sz = 1) =>\n matrix([\n [sx, 0, 0, 0],\n [0, sy, 0, 0],\n [0, 0, sz, 0],\n [0, 0, 0, 1],\n ]);\n\nconst scale = (sx = 1, sy = 1) => scale3d(sx, sy);\nconst scaleX = (sx = 1) => scale(sx);\nconst scaleY = (sy = 1) => scale(1, sy);\nconst scaleZ = (sz = 1) => scale3d(1, 1, sz);\n\nconst skew = (alpha = 0, beta = 0) => {\n const tanAlpha = Math.tan(alpha) || 0;\n const tanBeta = Math.tan(beta) || 0;\n return matrix([\n [1 + tanAlpha * tanBeta, tanAlpha, 0, 0],\n [tanBeta, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1],\n ]);\n};\n\nconst skewX = (theta: number) => skew(theta);\nconst skewY = (theta: number) => skew(0, theta);\n\nconst translate3d = (dx = 0, dy = 0, dz = 0) =>\n matrix([\n [1, 0, 0, dx],\n [0, 1, 0, dy],\n [0, 0, 1, dz],\n [0, 0, 0, 1],\n ]);\n\nconst translate = (dx = 0, dy = 0) => translate3d(dx, dy, 0);\nconst translateX = (dx = 0) => translate3d(dx);\nconst translateY = (dy = 0) => translate3d(0, dy);\nconst translateZ = (dz = 0) => translate3d(0, 0, dz);\n\nconst argsTransformMap = {\n matrix: stringArgsToFloat,\n matrix3d: stringArgsToFloat,\n rotate: stringArgsToRadians,\n rotate3d: (x, y, z, t) => [...stringArgsToFloat(x, y, z), toRadians(t)],\n rotateX: stringArgsToRadians,\n rotateY: stringArgsToRadians,\n rotateZ: stringArgsToRadians,\n scale: stringArgsToFloat,\n scale3d: stringArgsToFloat,\n scaleX: stringArgsToFloat,\n scaleY: stringArgsToFloat,\n scaleZ: stringArgsToFloat,\n skew: stringArgsToRadians,\n skewX: stringArgsToRadians,\n skewY: stringArgsToRadians,\n translate: stringArgsToFloat,\n translate3d: stringArgsToFloat,\n translateX: stringArgsToFloat,\n translateY: stringArgsToFloat,\n translateZ: stringArgsToFloat,\n};\n\nconst transformMatrixMap = {\n none: identity,\n matrix: (l11, l12, dx, l21, l22, dy) =>\n matrix([\n [l11, l12, 0, dx],\n [l21, l22, 0, dy],\n [0, 0, 1, 0],\n [0, 0, 0, 1],\n ]),\n matrix3d: (\n m11,\n m12,\n m13,\n m14,\n m21,\n m22,\n m23,\n m24,\n m31,\n m32,\n m33,\n m34,\n m41,\n m42,\n m43,\n m44\n ) =>\n matrix([\n [m11, m12, m13, m14],\n [m21, m22, m23, m24],\n [m31, m32, m33, m34],\n [m41, m42, m43, m44],\n ]),\n // perspective: ()=>identity, // TODO\n rotate: rotateZ,\n rotateX,\n rotateY,\n rotateZ,\n scale,\n scale3d,\n scaleX,\n scaleY,\n scaleZ,\n skew,\n skewX,\n skewY,\n translate,\n translate3d,\n translateX,\n translateY,\n translateZ,\n};\n\nconst matrixToArray = (m) => m().reduce((acc, v) => [...acc, ...v]);\n\nexport default function (value: string): TPropertyAssignment[] {\n const calls = getMacroCalls(value);\n // operations performed right to left\n // i.e. transform: translateY(20) rotate(90deg)\n // means rotate 90 degrees, then translate up 20\n // so we reverse in-place the calls array which initially\n // has the translation first followed by the rotate.\n calls.reverse();\n //@ts-ignore\n const transformMatrix = calls.reduce((acc, { macro: f, args }) => {\n if (!transformMatrixMap.hasOwnProperty(f)) {\n return acc;\n }\n const argsTransform = argsTransformMap[f] || (() => args);\n const transform = transformMatrixMap[f](...argsTransform(...args));\n return matrix(transform.prod(acc));\n }, identity);\n return [[\"transform-matrix\", matrixToArray(transformMatrix)]];\n}\n" }, { "path": "packages/react-juce/src/lib/MacroProperties/index.ts", "content": "import transformPropertiesGetter from \"./Transform\";\n\nexport const macroPropertyGetters = {\n transform: transformPropertiesGetter,\n};\n" }, { "path": "packages/react-juce/src/lib/MacroProperties/types.d.ts", "content": "export type TMacroCall = {\n macro: string;\n args: string[];\n};\n\nexport type TPropertyAssignment = [string, string | number];\n" }, { "path": "packages/react-juce/src/lib/MacroProperties/util.ts", "content": "import { TMacroCall } from \"./types\";\n\n// don't try too hard, we don't need to support qouted strings containing commas etc.\nexport const splitArgs = (a: string) => {\n const argArray = a.trim().split(/\\s*,\\s*/);\n if (argArray.length === 1 && argArray[0] === \"\") return [];\n return argArray;\n};\n\nexport const getMacroCalls = (s: string): TMacroCall[] => {\n const macroMatcher = String.raw`([a-zA-Z0-9]+)\\(([^)]*)\\)`;\n let r = new RegExp(macroMatcher, \"g\");\n // the rest would be trivial with matchAll\n // which duktape sadly lacks\n const matches = s.match(r);\n if (!matches) return [];\n // unset \"g\" flag, otherwise r.exec returns null when multiple matches occurred\n r = new RegExp(macroMatcher);\n const macroCalls = [];\n for (const match of matches) {\n // @ts-ignore\n const [, macro, args] = r.exec(match);\n macroCalls.push({\n // @ts-ignore\n macro,\n // @ts-ignore\n args: splitArgs(args),\n });\n }\n return macroCalls;\n};\n" }, { "path": "packages/react-juce/src/lib/MethodTracer.ts", "content": "//@ts-nocheck\n\nvar inspect = require(\"object-inspect\");\n\n/** An object to be used as an ES6 Proxy handler to trace method calls and\n undefined property accesses on the target object.\n */\nexport default {\n get(target, propKey, receiver) {\n const f = target[propKey];\n\n if (typeof f === \"undefined\") {\n console.log(\n \"MethodTrace: Stubbing undefined property access for\",\n propKey\n );\n\n return function _noop(...args) {\n console.log(\n \"MethodTrace Stub:\",\n propKey,\n ...args.map((arg) => {\n return inspect(arg, { depth: 1 });\n })\n );\n };\n }\n\n if (typeof f === \"function\") {\n return function _traced(...args) {\n console.log(\n \"MethodTrace:\",\n propKey,\n ...args.map((arg) => {\n return inspect(arg, { depth: 1 });\n })\n );\n\n return f.apply(this, args);\n };\n }\n\n return f;\n },\n};\n" }, { "path": "packages/react-juce/src/lib/NativeMethods.ts", "content": "let Native = global[\"__NativeBindings__\"] || {};\nlet DefaultExport = Native;\n\ndeclare var process: {\n env: {\n NODE_ENV: string;\n };\n};\n\nif (process.env.NODE_ENV !== \"production\") {\n // @ts-ignore\n DefaultExport = new Proxy(Native, {\n get: function (target, propKey, receiver) {\n if (\n target.hasOwnProperty(propKey) &&\n typeof target[propKey] === \"function\"\n ) {\n return function __NativeMethodWrapper__(...args: any): any {\n return target[propKey].call(null, ...args);\n };\n }\n\n return function __NativeMethodWrapper__() {\n console.warn(\n `WARNING: Attempt to access undefined native method ${target}`\n );\n };\n },\n });\n}\n\nexport default DefaultExport;\n" }, { "path": "packages/react-juce/src/lib/Renderer.ts", "content": "import MethodTracer from \"./MethodTracer\";\nimport ReactReconciler from \"react-reconciler\";\nimport Backend, { ViewInstance, RawTextViewInstance } from \"./Backend\";\n\nimport invariant from \"invariant\";\n\ntype HostContext = {\n isInTextParent: boolean;\n};\n\n//TODO: This should really be types against ReactReconciler.HostConfig with the generics typed out.\nconst HostConfig = {\n /** Time provider. */\n now: Date.now,\n\n /** Indicates to the reconciler that our DOM tree supports mutating operations\n * like appendChild, removeChild, etc.\n */\n supportsMutation: true,\n\n /** Provides the context for rendering the root level element.\n *\n * Really only using this and `getChildHostContext` for enforcing nesting\n * constraints, such as that raw text content must be a child of a \n * element.\n */\n getRootHostContext(rootContainerInstance: ViewInstance): HostContext {\n return {\n isInTextParent: false,\n };\n },\n\n /** Provides the context for rendering a child element.\n */\n getChildHostContext(\n parentHostContext: HostContext,\n elementType: string,\n rootContainerInstance: ViewInstance\n ): HostContext {\n const isInTextParent =\n parentHostContext.isInTextParent || elementType === \"Text\";\n\n return { isInTextParent };\n },\n\n prepareForCommit: (...args: any) => {},\n resetAfterCommit: (...args: any) => {\n Backend.resetAfterCommit();\n },\n\n /** Called to determine whether or not a new text value can be set on an\n * existing node, or if a new text node needs to be created.\n *\n * This is essentially born from the fact in that in a Web DOM, there are certain\n * nodes, such as