Skip to content

Commit

Permalink
Restructure repo after transfer from Nick T
Browse files Browse the repository at this point in the history
    This is one big old messy commit restructuring the repo to account
    for the new react-juce-examples repo. This includes various
    documentation fixes and updates.
  • Loading branch information
jmarler authored and JoshMarler committed May 19, 2024
1 parent 0693801 commit dc2aedb
Show file tree
Hide file tree
Showing 1,042 changed files with 5,439 additions and 503,298 deletions.
44 changes: 0 additions & 44 deletions .github/workflows/cmake.yml

This file was deleted.

3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
.cache/

build
examples/TestRunner/Builds
examples/**/build

# For VSCode users
*.code-workspace
Expand Down Expand Up @@ -97,3 +95,4 @@ extras/Projucer/JUCECompileEngine.dylib
**/AAX_SDK_2p3p1/Libs/Debug
**/AAX_SDK_2p3p1/Libs/Release
**/AAX_SDK_2p3p1/Documentation
hermes-build
3 changes: 0 additions & 3 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
[submodule "juce"]
path = ext/juce
url = ../../juce-framework/JUCE.git
[submodule "yoga"]
path = react_juce/yoga
url = ../../facebook/yoga.git
Expand Down
54 changes: 6 additions & 48 deletions CMakeLists.txt
Original file line number Diff line number Diff line change
@@ -1,54 +1,12 @@
cmake_minimum_required(VERSION 3.15)
project(reactjuce VERSION 0.1.0)

# Change this option to ON if you want to build the AudioPluginHost for example
# (practical to debug the plugin processor directly from your IDE)
option(JUCE_BUILD_EXTRAS "Build JUCE Extras" OFF)


# Change this option to set the JS Interpreter/Engine you wish to run React-JUCE against.
set(REACTJUCE_JS_LIBRARY DUKTAPE CACHE STRING "The JS Engine to use: either HERMES or DUKTAPE")


add_subdirectory(ext/juce)

# Adding any custom modules you might have:
juce_add_module(react_juce)

# Setup the JS engine/interpreter to use.
if (REACTJUCE_JS_LIBRARY STREQUAL "HERMES")
add_subdirectory(react_juce/hermes)

target_compile_definitions(
react_juce
INTERFACE
REACTJUCE_USE_HERMES=1
)

#TODO: We should be able to remove this include bloc once the following PR is merged
# over at hermes upstream: https://github.com/facebook/hermes/pull/454
target_include_directories(
react_juce
INTERFACE
react_juce/hermes/API/
react_juce/hermes/public/
)

target_link_libraries(
react_juce
INTERFACE
hermesapi
)
elseif (REACTJUCE_JS_LIBRARY STREQUAL "QUICKJS")
#TODO: Add QuickJS cmake settings/includes here.
elseif (REACTJUCE_JS_LIBRARY STREQUAL "DUKTAPE")
target_compile_definitions(
react_juce
INTERFACE
REACTJUCE_USE_DUKTAPE=1
)
endif()
add_subdirectory(react_juce/hermes)

# If you want to create new projects, you can init them in the examples folder
# and add them here with the add_subdirectory command
add_subdirectory(examples/GainPlugin)
target_link_libraries(
react_juce
INTERFACE
hermesapi
)
67 changes: 47 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,75 @@

> Write cross-platform native apps with React.js and JUCE
React-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/).
TODO: Reference Yoga and Hermes/Duktape

For 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)
React-JUCE is a hybrid JavaScript/C++ framework that enables a [React.js](https://reactjs.org/) UI for a [JUCE](http://juce.com/) application or plugin.

## Status
For more information, see the introductory blog post here: [A JUCE Rendering Backend for React.js](https://nickwritesablog.com/blueprint-a-juce-rendering-backend-for-react-js)

## So you wanna use JavaScript to build audio apps/plugins ...

Wait! Have you seen [Elementary](https://github.com/nick-thompson/elementary)?

Why are we pointing you at another project?

React-JUCE and Elementary serve two slightly different purposes.
If you're looking to develop audio apps in modern functional JavaScript
then Elementary might be the project for you. React-JUCE allows you to
add a React JS UI to your JUCE C++ app. What if we told you there is also a JS
based environment for your DSP/audio code (and yes the performance is pretty darn good)?
You can write your entire plugin (UI and DSP) in JS, oh and you can hot-reload eveything too!

[Elementary](https://github.com/nick-thompson/elementary)?

**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
to a 1.0 release.
OK, so why React-JUCE?

**Anticipated Breaking Changes**
Well, many reasons. Maybe you have an existing library of C++ DSP/Audio code,
perhaps its a library that you've spent hard hours (OK, hard years) crafting and
you just want a rapid development workflow for your UI? React-JUCE is for you.
Perhaps you're developing embedded Linux apps and you need C++ but want to
use React/JavaScript for your UI code? React-JUCE can help.
Maybe you hate JavaScript? Wait ... You probably shouldn't be here.
Maybe you're just much more comfortable writing DSP (or code in general) in C++
and you just want to try out React for your UI? React-JUCE is for you.

- We'll be renaming Blueprint to react-juce before beta (#34)
- ~~Updating the examples and `npm init` template to point to npm instead of the local package~~
- ~~`ReactApplicationRoot::evaluate` and `ReactApplicationRoot::evaluateFile` (#115)~~
- ~~Refactoring the hot reloader and decoupling the EcmascriptEngine from ReactApplicationRoot (#65)~~
We believe React-JUCE still has lot to offer even with [Elementary](https://github.com/nick-thompson/elementary)'s existence.
So, if you've weighed up your pros and cons then jump in, we're happy to have you!

## Status

**Approaching Beta**. Maintenance/Development of React-JUCE has recently been
taken over from Nick Thompson (original creator) by Joshua Marler. The repository
is going through a temporary restructure but we are pushing towards a stable v1.0.
Updates will be posted once v1.0 is hit. In the meantime please direct any questions
to discussions or to our Discord channel.

## Resources

- Documentation: [Docs & Getting Started](https://docs.react-juce.dev)
- Discussions: [GitHub Discussions](https://github.com/nick-thompson/react-juce/discussions)
- Discussions: [GitHub Discussions](https://github.com/JoshMarler/react-juce/discussions)
- Community: [The Audio Programmer Discord Server](https://discord.gg/3H4wwVf49v)
- Join the `#blueprint` channel and say hi!
- Join the `#react-juce` channel and say hi!

## Maintainers

- [@nick-thompson](https://github.com/nick-thompson)
Originally authored by @nick-thompson, now maintained by @JoshMarler.

- [@joshmarler](https://github.com/JoshMarler)
- [@nick-thompson](https://github.com/nick-thompson)

## Examples

React-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.
You can check out a selection of example plugins over at [react-juce-examples](https://github.com/JoshMarler/react-juce-examples)

![Creative Intent Remnant: Screenshot](https://github.com/nick-thompson/react-juce/blob/master/RemnantScreenShot.jpg)
To see a real world example of a plugin build with react-juce checkout [Creative Intent's Remnant](https://www.creativeintent.co/product/remnant).

Besides that, you can check out the example code in the `examples/` directory. See the "Documentation" section
below 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
love to showcase your work.
If you have a project written with React-JUCE that you want to share, get in touch! We would love to showcase your work.

## Contributing

See [CONTRIBUTING.md](https://github.com/nick-thompson/react-juce/blob/master/CONTRIBUTING.md)
See [CONTRIBUTING.md](https://github.com/JoshMarler/react-juce/blob/master/CONTRIBUTING.md)

## License

See [LICENSE.md](https://github.com/nick-thompson/react-juce/blob/master/LICENSE.md)
See [LICENSE.md](https://github.com/JoshMarler/react-juce/blob/master/LICENSE.md)
File renamed without changes.
26 changes: 14 additions & 12 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
# Introduction

React-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/).
React-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.

For 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)
For 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)

## Examples

React-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.
React-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.

![Creative Intent Remnant: Screenshot](_media/RemnantScreenShot.jpg)

Besides that, you can check out the example code in the `examples/` directory. See the "Documentation" section
below 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
love to showcase your work.
Besides that, you can check out a selection of example plugins over at [react-juce-examples](https://github.com/JoshMarler/react-juce-examples)

## Contributing
If you have a project written with React-JUCE that you want to share, get in touch! We would love to showcase your work.

Yes, 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)
or the [project tracker](https://github.com/nick-thompson/react-juce/projects/1) to see if there's outstanding work that you might
be 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.
## Contributing

I don't have a formal style guide at the moment, so please try to match the present formatting in any code contributions.
Yes, please! We would be very happy to welcome your involvement. Take a look at the [open issues](https://github.com/JoshMarler/react-juce/issues)
or the [project tracker](https://github.com/JoshMarler/react-juce/projects/1) to see if there's outstanding work that you might
be able to get started. Or feel free to propose an idea or offer feedback by [opening an issue](https://github.com/JoshMarler/react-juce/issues/new) as well.

## License

See [LICENSE.md](https://github.com/nick-thompson/react-juce/blob/master/LICENSE.md)
See [LICENSE.md](https://github.com/JoshMarler/react-juce/blob/master/LICENSE.md)
9 changes: 4 additions & 5 deletions docs/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
## Guides

- [Getting Started](guides/Getting_Started.md)
- [Running the Examples](guides/Running_the_Examples.md)
- [Integrating Your Project](guides/Integrating_Your_Project.md)
- [Setting Up Your Project](guides/Integrating_Your_Project.md)
- [Debugging with Duktape](guides/Debugging_With_Duktape.md)
- [Why Not React Native?](guides/Why_Not_React_Native.md)

Expand All @@ -23,11 +22,11 @@

## Native

- [JS/C++ Interop](native/Interop.md)
- [Custom Native Components](native/Custom_Native_Components.md)
- [JS/Native Interop](native/Interop.md)

## Have a Question?

- [GitHub Discussions](https://github.com/nick-thompson/react-juce/discussions)
- [GitHub Discussions](https://github.com/JoshMarler/react-juce/discussions)
- [Discord Chatroom](https://discord.gg/3H4wwVf49v)
- [Open an Issue](https://github.com/nick-thompson/react-juce/issues)
- [Open an Issue](https://github.com/JoshMarler/react-juce/issues)
4 changes: 2 additions & 2 deletions docs/components/Image.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import logoDataUri from "./logo.jpg";
function App(props) {
return (
<View {...styles.outer} onMouseDown={(e) => console.log("Mouse event!", e)}>
<Image {...styles.image} source="file:///Users/nick/Documents/logo.jpg" />
<Image {...styles.image} source="file:///Users/jmarler/Documents/logo.jpg" />
<Image {...styles.image} source={logoDataUri} />
</View>
);
Expand Down Expand Up @@ -47,7 +47,7 @@ const styles = {

#### source

The image source (either a remote URL ([#14](https://github.com/nick-thompson/react-juce/issues/14)), a local file resource, or a data uri).
The image source (either a remote URL ([#14](https://github.com/JoshMarler/react-juce/issues/14)), a local file resource, or a data uri).

| Type | Required | Supported |
| ------ | -------- | -------------------------------------------------------------------------- |
Expand Down
Loading

0 comments on commit dc2aedb

Please sign in to comment.