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!