Magic Leap MagicScript Components Landscape Sample Application. 

Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one

mlsdk v.0.20.0
https://creator.magicleap.com/downloads/lumin-sdk/overview

magic-script-cli v2.0.1
https://www.npmjs.com/package/magic-script-cli

magic-script-polyfills v2.2.0
https://www.npmjs.com/package/magic-script-polyfills

magic-script-components v0.0.8
https://www.npmjs.com/package/magic-script-components

image file
https://tokufxug.sakura.ne.jp/magicscript/sadao.png

**Create Project**

```sh
magic-script init my-cmp org.magicscript.cmp "Component"
cd my-cmp
mkdir res
```
Put image file in res folder.

**Install**

```sh
npm install
npm install magic-script-components
npm install --save-dev @babel/core @babel/plugin-transform-react-jsx rollup-plugin-babel
```

**Code**
Change app.package

```sh
DATAS = "digest.sha512.signed" : "." \
        "bin/" : "bin/" \
        "res/" : "res/"
OPTIONS = package/minApiLevel/2
```

Create a new .babelrc file

```json
{
    "plugins": [
        "@babel/plugin-syntax-jsx",
        "@babel/plugin-transform-react-jsx"
    ]
}
```

Change rollup.config.js

```javascript
// Rollup config for consuming some npm modules in MagicScript

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  external: ['uv', 'lumin'],
  input: 'src/main.js',
  preserveModules: true,
  output: {
    dir: 'bin',
    format: 'es'
  },
  plugins: [
    babel({ exclude: "node_modules/**" }),
    resolve(),
    commonjs()
  ]
};
```

Change app.js

```jsx
import React from 'react'

export class MyApp extends React.Component {
  
  constructor(props)
  {
    super(props);

    this.state = {counter: props.counter};
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  onButtonClick(event)
  {
    this.setState(state => ({counter: state.counter + 1}));
  }

  render()
  {
    return(
      <view name='main-view'>
          <text textSize={0.1} 
                textColor={[1.0, 1.0, 0.0, 1.0]} 
                localPosition={[0, 0.25, 0]} >{this.state.counter}
          </text>
          <button width={0.25} 
                  height={0.15} 
                  roundness={0.5} 
                  onClick={this.onButtonClick}>+</button>
          <image width={0.15} 
                 height={0.25}
                 filePath={'res/sadao.png'}
                 localPosition={[-0.25, 0.20, 0]}>
          </image>
      </view>
    );    
  }
}
```
Create global-scope.js newly in src folder

```javascript
globalThis.process = { env: { NODE_ENV:"development" } };
export default process;
```

Change main.js

```jsx
import 'magic-script-polyfills';
import process from './global-scope.js';
import React from 'react';
import mxs from 'magic-script-components';

import { MyApp } from './app.js';

mxs.bootstrap(
    <MyApp 
        type='landscape' 
        volumeSize={[1,1,1]} 
        caption='My App Caption' 
        counter={0} />
);

```
![Capture_000076.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19029/e33e73c9-45f3-b25d-4628-7db5b4c00941.jpeg)


**Build**

```sh
magic-script build -i
```

**Run**

```sh
magic-script run --port=10000
```

**Reference**
magic-script-components (Github)
https://github.com/magic-script/magic-script-components

MagicScript Components List
https://github.com/magic-script/magic-script-components/blob/HEAD/docs/Components.md

magicscript
https://www.magicscript.org/

Thanks!