0.3.6 • Published 2 years ago

ha-lovelace-ts v0.3.6

Weekly downloads
20
License
MIT
Repository
-
Last release
2 years ago

lovelace_ts - HA Lovelace Config as TypeScript

Usage

  1. Setup a Node devenv - make sure you have nodejs and yarn installed, create a directory, run yarn init and yarn add ha-lovelace-ts
  2. Setup your tsconfig.json file with at least these parameters:

    {
        "compilerOptions": {
            "rootDir": ".",
    
            "jsx": "react",
            "jsxFactory": "h",
            "jsxFragmentFactory": "Fragment",
        },
    }
  3. Create an index.tsx file and start writing your UI. Here's an example:

    import { render, h } from 'ha-lovelace-ts'
    
    async function Blah() {
        return <area area='Blah' />
    }
    
    export default render(<dashboard title='Robert'>
        <view title='Hia' path='phil' type="masonry">
            <horizontal_stack>
                <entities entities={['a', 'b']} />
            </horizontal_stack>
        </view>
        <view title='Hia' path='phil'>
            <Blah />
        </view>
    </dashboard>)
  4. Compile - run yarn lovelace_ts build index.tsx output.yml

  5. Copy the generated file to your HA instance

Contributing Card Definitions

Take a look at src/contrib and look at the existing definitions as examples.

0.3.6

2 years ago

0.3.5

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.0

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago