Rabu, 12 October 2022

    Panduan Live Coding di Browser Sendiri

    Dalam artikel ini kita akan belajar bagaimana cara membuat live editor untuk ngoding di browser yang kita sendiri.

    Mungkin sebelumnya Anda sering menggunakan yang namanya CodeSandbox, CodePen, dan lain semacam nya. Tetapi, bagaimana jika kita belajar bagaimana cara membuat nya.

    Sandpack

    Sandpack adalah React komponen yang memberikan semacam wrapper yang dapat diedit dan berjalan di browser kita sendiri. Sandpack ini sendiri dibangun oleh CodeSanbox, maka oleh karena itu, Sandpack ini juga mengizinkan kita untuk menggunakan / embed komponen yang pernah kita buat di CodeSanbox ke dalam aplikasi kita.

    Sanpack

    Mari Kita Mulai

    Karena sandpack adalah komponen react, maka kita akan install react terlebih dahulu. Untuk case ini, saya akan menggunakan Vite.js, buka terminal Anda dan jalankan perintah berikut ini:

    npm create vite@latest sandpak -- --template react
    

    Setelah itu, buka folder nya dari terminal kita dengan melakukan cd sandpack. Kemudian kita akan langsung sandpack nya dengan perintah seperti ini:

    npm i @codesandbox/sandpack-react
    

    Setelah itu, buka project ini di browser Anda, dan buka file App.jsx. Kemudian, masukkan sandpack di komponen ini seperti:

    import React from 'react';
    import { Sandpack } from '@codesandbox/sandpack-react';
    
    export default function App(props) {
        return (
            <div className='p-10'>
                <Sandpack
                    theme="dark"
                    template="react"
                />
            </div>
        );
    }
    

    Template

    Untuk template, Anda bisa pilih sesuai yang telah diberikannya. Berikut adalah list dari template nya:

    # ✓ react-ts
    # ✓ angular
    # ✓ vue
    # ✓ vue3
    # ✓ vanilla-ts
    # ✓ vanilla
    
    <Sandpack template="angular" />
    

    Tema

    Untuk temanya, tentu Anda bisa ganti menggunakan "dark" / "light", tetapi sepertinya Anda ingin lebih, Anda mungkin berfikir entah ingin memakai github, atau pun monokaiPro. Baik, untuk melakukan itu, kita bisa install daftar tema untuk sandpack nya.

    Buka terminal Anda kemali, dan instal tema nya dengan perintah berikut ini:

    npm i @codesandbox/sandpack-themes
    

    Kemudian untuk menggunakannya, kita akan import dia seperti:

    import { Sandpack } from '@codesandbox/sandpack-react';
    import { monokaiPro } from '@codesandbox/sandpack-themes';
    ...
    ...
    <Sandpack
        theme={monokaiPro}
        template="react"
    />
    

    Untuk temanya dari sanpack-themes itu ada 11, mungkin nanti diperbarui lagi. Untuk saat ini, berikut ini adalah list yang bisa dipakai.

    ✓ aquaBlue
    ✓ atomDark
    ✓ cobalt2
    ✓ dracula
    ✓ ecoLight
    ✓ freeCodeCampDark
    ✓ githubLight
    ✓ levelUp
    ✓ monokaiPro
    ✓ nightOwl
    ✓ sandpackDark
    

    Jangan lupa import untuk memakai temanya seperti:

    import { sandpackDark } from '@codesandbox/sandpack-themes';
    

    Custom UI

    Mungkin Anda berfikir, jika tampilan yang diberikan kurang mantap, dan memang bisa saja ingin mengganti posisinya, untuk melakukan itu Anda bisa melakukannya pada props options.

    <Sandpack
        template='react'
        theme={monokaiPro}
        options={{
            showNavigator: true,
            showTabs: true,
            closableTabs: true,
            showLineNumbers: true,
            showInlineErrors: true,
            wrapContent: true,
            editorHeight: 590,
            editorWidthPercentage: 60
        }}
    />
    

    Custon Dependencies

    Jika Anda berfikir ingin memakai custom dependencies seperti misalnya react-spring, maka Anda bisa melakukannya seperti:

    <Sandpack
        template="react"
        customSetup={{
            dependencies: {
                "react-spring": "9.5.5",
                "react-scripts": "4.0.0",
            },
        }}
    />
    

    Semoga informasi ini bermanfaat untuk Anda, dan jangan lupa untuk mempelajari Sanpack ini lebih dalam lagi dengan mengunjungi langsung disini. Saya Irsyad, dan saya akan melihat Anda lagi di artikel selanjutnya.

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang