Facilitates creating and managing UI components dynamically across multiple platforms, enabling stateful and composable UI representations. Features include static and dynamic tree structures, state management, and support for various rendering engines.
[!NOTE]
No longer active!
After internal experimentation and discussion, we've decided to move forward with other options.
class Counter : ComposableModel<Int, CounterEvent>(0) {
private fun increment() {
withState {
setState(state.value + 1)
}
}
private fun decrement() {
withState {
setState(state.value - 1)
}
}
override fun on(event: CounterEvent) = when (event) {
Increment -> increment()
Decrement -> decrement()
}
}
@SerializableComponentBox
fun main() = componentBox {
tree {
lazyColumn<CounterEvent>(
verticalArrangement = Arrangement.SpaceEvenly(2.dp),
horizontalAlignment = Alignment.Start
) {
child(header)
child(count)
child(incrementButton)
child(decrementButton)
}
}
}
header = text(
text = ,
style = TextStyle(fontWeight = FontWeight.ExtraBold)
)
count = text(
text = ,
style = TextStyle(color = Color.Hex())
)
incrementButton = textButton(
text = ,
onClick = semantic { Increment }
)
decrementButton = textButton(
text = ,
onClick = semantic { Decrement }
)
@Composable
@ComponentBoxExport
fun main() = statefulComponentBoxGraph(init = null) {
Graph(start = CounterOnboardingFlow.value) {
componentBox(CounterLoginScreen.value, LoginScreen())
componentBox(CounterOnboardingFlow.value, OnboardingFlow())
componentBox(CounterScreen.Home.value, HomeScreen())
}
}
@Composable
fun LoginScreen() = Forest {
tree("heading", Tree { LoginHeading() })
tree("button", Tree { LoginButton() })
}
@Composable
fun OnboardingFlow() = Trail {
node(WelcomeScreen())
node(FeatureDiscoveryScreen())
node(HomeScreen())
}
./gradlew componentBoxJs
./gradlew componentBoxJson
: () {
scope = CoroutineScope(Dispatchers.Default)
service = ComponentBoxService(scope)
componentBox = service.componentBox
render = RenderingEngine()
{
.onStart()
service.launch(MANIFEST_URL)
}
{
.onCreate(savedInstanceState)
setContent {
root = componentBox.collectAsState()
render {
root.value
}
}
}
}
@Composable
fun ComponentBoxView(componentBox: StateFlow<Component?>, render: RenderingEngine) {
val root = componentBox.collectAsState()
render {
root.value
}
}
struct ComponentBoxView: View {
service ()
root: ?
body: {
render {
root
}
.onAppear {
service.launch(from: ) { result
result {
.success( componentBox):
.main.async {
.root componentBox.root
}
}
}
}
}
Snapshots are available in Sonatype's snapshots repository.
Copyright (c) 2023 Dropbox, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
fun HomeScreen() = ComponentBox {
Tree {
LazyColumn(
verticalArrangement = Arrangement.SpaceEvenly(2.dp),
horizontalAlignment = Alignment.Start
) {
child(header)
child(Count())
child(IncrementButton())
child(DecrementButton())
}
}
}
fun IncrementButton() = StatefulComposable<Counter> {
ContainedButton(onClick = lambda { it.on(Increment) }) {
text(text = "+1")
}
}
fun DecrementButton() = StatefulComposable<Counter> {
ContainedButton(onClick = lambda { it.on(Decrement) }) {
text(text = "-1")
}
}
fun Count() = StatefulComposable<Counter> {
text(
text = "Count: ${it.state.value}",
style = TextStyle(color = Color.Hex("#FF0000"))
)
}
export default function ComponentBoxView(props: {manifestUrl: string}) {
const [root, setRoot] = useState<Component | null>(null);
const service = new ComponentBoxService();
const render = new RenderingEngine();
useEffect(() => {
async function launch(manifestUrl: string): Tree {
const componentBox = await service.launch(manifestUrl)
setRoot(componentBox.root)
}
launch(props.manifestUrl)
}, [props.manifestUrl]);
return render(root)
}
Surfaced from shared tags and platforms — no rankings paid for.