In den letzten Monaten wurde ich damit beauftragt, herauszufinden, wie ich eigenständige Widgets für meinen Vollzeitjob schreiben und verwalten sollte. Obwohl es relativ einfach war, sicherzustellen, dass sie funktionsfähig waren, wurde mir schnell klar, dass ihre Wartung eine ganz andere Herausforderung darstellte

Vor diesem Hintergrund habe ich in meiner Freizeit ein Nebenprojekt gestartet und es als Open Source veröffentlicht. Dadurch konnte ich meine Erkenntnisse und Strategien weitergeben, die mir geholfen haben, die Qualität meiner Widgets sicherzustellen.

Wie habe ich sie ursprünglich gemacht?

Da meine Widgets ein hohes Maß an Reaktivität erforderten, habe ich mich stark auf die Svelte-Komponenten-API verlassen und Rollup für die Bündelung verwendet. „Es war einfach und direkt, bis ich folgende Probleme bekam:

• Mein ungenutztes CSS nahm mit der Zeit zu und ich war mir auch nicht sicher, ob nur das CSS der gewünschten Komponente gebündelt wurde.

• Schwierige Handhabung von JavaScript über Widgets ohne strikte Eingabe. Es wurde schnell zu einem Chaos, da ich einige Dienstprogramme wie JWT-Dekodierung und Authentifizierung teilen musste.

Wie habe ich es geändert?

Ich begann darüber nachzudenken, wie ich einige Standardeinstellungen festlegen und, was noch wichtiger ist, ein Typsystem integrieren könnte. Dies führte zur Entstehung meines Nebenprojekts svelte-standalone.

Das Ziel von svelte-standalone war:

• Stellen Sie ein gut minimiertes CSS sicher und entfernen Sie nicht verwendetes CSS beim Bündeln.
• Stellen Sie sicher, dass ein Typsystem Ihrer Wahl gut unterstützt und in allen meinen Apps wiederverwendet wird.

Hinweis: Das Typsystem der Wahl war TypeScript.

• Stellen Sie Unit- und Integrationstests sicher.
• Stellen Sie sicher, dass ich meine Widgets vor und nach der Rollup-Analyse visuell überprüfen kann.

Wie habe ich das alles erreicht?

Nachdem ich die TypeScript-Kompatibilität mit Rollup-Plugins und dem Svelte-Präprozessor sichergestellt hatte, trat ich einen Schritt zurück und zerlegte mein Projekt in wichtige Schritte. Grundsätzlich hatte ich:

1. Eine .svelte.
2. Eine embed.js-Datei, die dafür verantwortlich ist, die Instanz der .svelte-Datei zu starten und sie zum Text hinzuzufügen.

Dadurch bemerkte ich, dass meine Einbettungsdatei im Grunde eine Standarddatei war, die auf alle meine Widgets repliziert wurde, und begann mit deren Generierung. So konnte ich Codegen-Tools verwenden, um drei Dateien basierend auf meinen schlanken Dateien und meinem Wunsch, die Typen in der gesamten App zu verarbeiten, zu generieren:

1. declaration.d.ts – aktiviert, dass ich meine Svelte-Komponente direkt importieren und mit dem SvelteComponent-Typ umschließen konnte, sodass ich meine Svelte-Komponenten standardmäßig stark typisiert habe.
2. types.ts – aktiviert, dass ich eine Standardkonfiguration basierend auf den Requisiten schreiben kann, die in deklaration.d.ts deklariert wurden.
3. embed.ts – Start/Stopp meiner Komponente auf standardmäßige Weise für alle meine Widgets aktiviert!

Und voilà! Dieser Ansatz löste meine Probleme mit dem Typsystem und verbesserte die Wartbarkeit meiner Widgets.

Wie ich CSS-Herausforderungen gemeistert habe:

Die größten CSS-bezogenen Herausforderungen, denen ich gegenüberstand, waren: Wie kann ich mein CSS ohne großen Aufwand bereinigen und minimieren? Wie kann ich CSS schreiben, an dem man leicht zusammenarbeiten und das man in verschiedene Umgebungen integrieren kann?

Die Lösung war ziemlich einfach: Verwenden Sie einfach Tailwind CSS.

Mit diesem Ansatz habe ich die folgenden Vorteile identifiziert:

• Keine widersprüchlichen Stile mehr: Mit Tailwind konnte ich mir keine Sorgen mehr über widersprüchliche Stile machen. Als ich es beispielsweise mit einer älteren App zu tun hatte, die stark von Bootstrap abhängig war, habe ich meinem Widget einfach ein Präfix und ein wichtiges Flag hinzugefügt, und die Konflikte wurden gelöst.

• Nahtlose Integration: Beim Importieren meines Widgets in eine andere Tailwind-App konnte ich bestimmte Tailwind-Anweisungen leicht weglassen, um meine Bundle-Größe zu reduzieren.

• Müheloses Bereinigen und Minimieren: Das Minimieren wurde unkompliziert, und mit Tailwinds integriertem PurgeCSS musste ich nur das Inhalts-Flag für jedes Widget richtig konfigurieren. Dadurch wurde sichergestellt, dass nur die erforderlichen Stile im endgültigen Paket enthalten waren.

Wie habe ich die Testprobleme gelöst?

Ich stand vor der Herausforderung, umfassende Tests für meine Widgets sicherzustellen, die Unit-Tests, Integrationstests und visuelle Tests umfassten.

Mein Hauptziel war es, meine Komponenten sowohl vor als auch nach der Verarbeitung mit Rollup zu visualisieren. Um dies zu erreichen, habe ich die folgenden Schritte unternommen:

• Streng typisiertes Storybook: Ich habe ein strikt typisiertes Storybook basierend auf meinen Dateien „declaration.d.ts“ und „types.ts“ implementiert. Dies machte es bequem, automatisch eine Standard-Story für jedes meiner Widgets zu generieren.

• Vite-Integration: Ich habe Vite verwendet, um die gebündelte Komponente auf einer Svelte-Route zu laden. Es war auch praktisch, eine Standardroutenkomponente basierend auf meinen TypeScript-Dateien zu generieren.

Das war alles! Über ein Feedback würde ich mich sehr freuen! Schauen Sie sich auch Svelte-Standalone an.

Egal, ob Sie Fragen, Anregungen oder Bedenken haben, kontaktieren Sie mich gerne!