I've check your project and it seems really cool and ambitious to me, the idea of canvas as a "rendering engine" can have many advantages and use cases (personally i'll love to dig into PS4 UI dev), i'm pretty sure there's a lot of more people who would be interested in contributing.

However it would be great if these people could find a way to communicate, that's why i'm suggesting a spectrum community

Cheers, and never stop doing it! 🔥

I was thinking about using https://docusaurus.io/ in docs/ folder. Following the structure of react-native (e.g: The Basics, Guides, Components, APIs).

I'm very open to other ideas too.

I work on UI for the PS4 daily, so I have some investment in this type of work, and over the past year, I have implemented a lot of the ideas here. So if it is welcome, I am going to use this issue to jot down some ideas (some i'm sure you have planned), and see if I can help in any way.

You are probably busy in the weeds for the reconciler.

Things I have implemented that I could maybe bring over:

• ListView
• ScrollableView
• FocusSystem (gamepad for example)
• Positioning based on parent.
• Improvements to the Image component, for example pre-loaded state, post-loaded, error, and caching.
• Accessibility
• Animation

Another huge win would be to implement flexbox https://github.com/facebook/yoga

Above all of this, I have a ps4 devkit that I can help test on.

Let me know if you need/want help, and if it is too early, I can check back later.

• Add BorderRadius as prop to the View.
• Updated the way the View is created
  • Instead of using ctx.rect to draw a rectangle, moveTo(), lineTo(), quadraticCurveTo() are used to allow a dynamic BorderRadius.
  • I couldn't' find a way around rect to generate a borderRadius based on a dynamic value, please let me know if this is aright way for this issue.

Hi, @raphamorim

This project looks really cool and I want to help it also to develop and learn.

• are you thinking about in a roadmap? like review the already done things and update?
• is the react functional components features inside of the roadmap?
• bonus: fix the roadmap hyperlink on docs

Currently, if isn't setting parent styles into the children it just uses the default styles, for example:

<View style={{ color: 'orange' }}><Text/></View>

ˆ Text should use color orange instead of black (which is the default).

https://facebook.github.io/react-native/docs/sectionlist

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

export default function App() {
  return (
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text>{title}</Text>
        )}
      />
  );
}

It's just a start code but works for now. I've added the examples on the docs using CodeSandbox; Please pay attention to texts, it could contain some typo.

#20

Related #16 #19

Docs

• [ ] Start sections on documentation (ref #18)
  • [ ] react-ape-boilerplate
  • [ ] "APIs" Section (ref #18)
    • [ ] List of View props (https://facebook.github.io/react-native/docs/view-style-props)
    • [ ] List of Image props (https://facebook.github.io/react-native/docs/image-style-props)
  • [x] "Components" Section (ref #18)
  • [x] "Contributing" Section (ref #22)
  • [x] Work on a way to render react-ape in Docusaurus
• [x] Add React Ape logo 95d5b1d832087f1e1a3d4966fa0237d157140687
• [x] Publish site (WIP)

Components

• [ ] <SectionList/> https://facebook.github.io/react-native/docs/sectionlist (#33)
• [ ] <Button/> https://facebook.github.io/react-native/docs/button
• [ ] <TextInput/> https://facebook.github.io/react-native/docs/textinput
• [ ] <Picker/> https://facebook.github.io/react-native/docs/picker
• [ ] <Slider/> https://facebook.github.io/react-native/docs/slider
• [ ] <Modal/> https://facebook.github.io/react-native/docs/modal

APIs

• [x] dimensions #28

Core

• [x] Virtual Canvas algorithm #21 ⚡️⚡️⚡️
• [ ] Allows to inspect using React DevTools 💯(dependent of #21)

• [x] Create ListView Component
• [ ] ListView Scroll Horizontal
• [ ] ListView Scroll Vertical
• [ ] Automatically distribute items coordinates based on width/height of each child

Bumps terser from 5.12.1 to 5.14.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps parse-url from 6.0.0 to 6.0.5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Summary

This PR introduces:

• Specs
• WebAssembly rendering
• ReactApeTree
• Platform

Below the explanation/overview for each of the features

Specs

This pull request introduces specs. Specs are formal agreement and documentation regarding React Ape Elements behavior, example below:

Render with WASM/Canvas (fallback to JS/Canvas)

More information soon.

ReactApeTree Overview

Since React Ape render using canvas, it can't properly read parent styles correctly. The idea behind this PR is to reduce issues regarding hierarchy, those problems makes the App looks super weird unless you rule/specify intentionally in every View which style it should carry (it's how Ape works nowaday ~unfortanelly~).

This PR introduces a tree that contains the layout and style property for each node, so can easily propagate it between children

Related #67

Known issues:

• Text style hierarchy doesn't work (it should render in orange)
• View positions aren't correctly geometrically
• View backgroundColor isn't correct, 2nd View should have same bgc as 1st and also 4th should have same as 3rd

Demo

return (
  <View style={{width: 80, height: 80, backgroundColor: 'grey', color: 'orange'}}>
    <View>
      <View style={{width: 80, height: 80, backgroundColor: 'powderblue'}}>
        <View
          style={{
            width: 30,
            height: 30
          }}>
          <Text>should be in orange</Text>
        </View>
      </View>
    </View>
  </View>
);

Before

After

Usage of _reactApeTree when process.env.NODE_ENV !== 'production'

Platform

When building a cross-platform app, you'll want to re-use as much code as possible. You'll probably have different scenarios where different code might be necessary. For instance, you may want to implement separated visual components for LG-webOS and Samsung-Tizen.

This PR also introduces the Platform module to easily organize your code and separate it by platform:

import { Platform } from 'react-ape';

console.log(Platform('webos')) // true
console.log(Platform('tizen')) // false
console.log(Platform('orsay')) // false

"Getting started" and "Learning the Basics" are outdated and contain wrong information. We don't have any boilerplate yet. Would be good to update those sections with valid information. Open to ideas :)

Currently the Publish workflow runs together with test, executing the same yarn ci (running tests again) it shouldn't be happening. Should wait for the test workflow check and the follow up with publish.

There's few approaches that could fix it:

• check if the tests have passed
• move the publish workflow to tests as a step but only runs if commit message have [publish]