Evoluce NPM Playground: PlayGist

23. 10. 2023

PlayGist je webový editor kódu, který nahrazuje dosavadní NPM Playground. Umožňuje vytvářet a spouštět projekty přímo v prohlížeči bez nutnosti cloudového úložiště. A pokud chcete práci uložit, můžete ji jednoduše exportovat do GitHub Gistu, ze kterého lze kód opět spustit.

Co je nového?

  • Evoluce z "NPM Playground": PlayGist je podobný svému předchůdci, "NPM Playground". Avšak přináší významné zlepšení tím, že odstraňuje omezení cloudového úložiště, které brzdilo jeho předchůdce. S PlayGistem můžete kódovat bez obav o úložištní limity, což vám dává svobodu vytvářet a spouštět své projekty Front-Endu efektivně.
  • Přeprogramovaný design: Uživatelské rozhraní se může zdát povědomé, ale není to jen jednoduchý facelift. PlayGist prošel kompletní přeprogramováním, přechodem z Lit frameworku na Next.js. Tato transformace zajišťuje robustnější a plynulejší zážitek, nabízející vám silné vývojové prostředí přímo ve vašem prohlížeči.
  • GitHub API Rate Limit: Je důležité si uvědomit, že PlayGist funguje v rámci limitů GitHub API. Nicméně, máme pro vás řešení. Stačí se jednoduše přihlásit do svého účtu na GitHubu a můžete obejít tato omezení a využít plný potenciál PlayGistu.

Klíčové funkce

  • Flexibilní vytváření souborů: Můžete snadno vytvářet soubory JavaScript (JS), JSX, TypeScript (TS) a TypeScript JSX (TSX) přímo v PlayGistu. Ačkoli nemůžete vytvářet složky kvůli naší integraci s GitHub Gisty, můžete tyto soubory importovat bez problémů. Jen si pamatujte, že při importu je nutné zachovat koncovku souboru (např. import "./component-a.tsx").
  • ES moduly a Top-Level Await: PlayGist podporuje moderní vývojové postupy. Musíte používat ES moduly a plně podporujeme top-level await. Tím se zajistí, že váš kód zůstane aktuální a připravený na nejnovější webové standardy.
  • Podpora NPM balíčků: Bare Specifiers: Využijte sílu NPM balíčků kompatibilních s prohlížeči. PlayGist vám umožňuje používat bare specifiers pro tyto balíčky, které budou automaticky vyhledány na Content Delivery Network (CDN). Tato bezproblémová integrace zjednodušuje proces zahrnutí třetích stran do vašich projektů.
  • Podpora lokálního a vzdáleného CSS: Importování CSS je s PlayGistem hračka. Lokální CSS soubory lze importovat přímo z modulů pomocí import "./style.css". Pro vzdálené CSS zdroje musíte vytvořit lokální CSS soubor, který odkazuje na vzdálený zdroj s plnou URL. Tato flexibilita vám umožňuje stylovat své projekty podle vašich představ.
  • HTML soubory na obzoru: Ačkoli HTML soubory zatím nejsou podporovány, buďte ve střehu na budoucí aktualizace. Když bude HTML podpora přidána, bude dodržovat omezení "pouze obsah těla" známé z platforem jako CodePen, zajistí tak bezproblémový přechod pro webové vývojáře.
  • Plně open-source: PlayGist je plně open-source projekt a můžete prozkoumat jeho kódovou základnu na GitHubu.

Otevření Github Gistu

PlayGist vám umožňuje exportovat váš projekt do GitHub Gistu. Stačí kliknout na tlačítko "Export to Gist" a PlayGist vám poskytne odkaz na váš Gist. Tímto způsobem můžete snadno sdílet svůj kód s ostatními a spustit ho znovu, kdykoli budete chtít.

Pokud chcete otevřít svůj projekt v GitHub Gistu, nebo veřejný Gist, je dostupný na adrese:

https://playgist.dev/<gist-id>

Gist ID lze získat z URL vašeho Gistu. Například, pokud je URL vašeho Gistu:

https://gist.github.com/tomas-wrobel/1234567890abcdef

Potom je vaše Gist ID 1234567890abcdef.

Shrnutí

Máme-li tuto strukturu souborů:

.
├── index.tsx
├── component-a.txt
├── style.css
└── utils.ts

Tak pak index.tsx může vypadat například takto:

import * as React from "react"; // bez nutnosti instalace
import * as ReactDOM from "react-dom"; // bez nutnosti instalace
import ComponentA from "./component-a.tsx"; // koncovka nutná!
import "./style.css";

const App: React.FunctionComponent = () => {
    return (
        <div>
            <h1>Hello, PlayGist!</h1>
            <ComponentA />
        </div>
    );
};

ReactDOM.render(<App />, document.body.appendChild(document.createElement("div")));

Pokud chcete zahrnout CSS z CDN, můžete vytvořit lokální soubor style.css s následujícím obsahem:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body {
    font-family: "Roboto", sans-serif;
}

Evoluce

Je to poprvé, co jsem se rozhodl přepsat celý projekt. Ačkoli to bylo náročné, jsem rád, že jsem se rozhodl pro tuto změnu. PlayGist je nyní mnohem robustnější a flexibilnější, což vám dává větší kontrolu nad vašimi projekty. Těším se na vaše zpětnou vazbu a nápady na další vývoj!