Uploaden en publiceren

Deze pagina beschrijft het volledige proces om een lokaal component naar het platform te publiceren. De eerste publicatie loopt altijd via deze pagina; latere versie-iteraties staan in Bijwerken en versies.

Controle vóór het uploaden

• [ ] Het component is een zelfstandige map met een entry-bestand (zie Componentspecificatie).
• [ ] De gebruikte dependencies staan in de node_modules van het huidige project.
• [ ] Eén bestand ≤ 3 MB, totale grootte ≤ 10 MB, aantal bestanden ≤ 30.
• [ ] De componentnaam voldoet aan PascalCase of kebab-case en is niet dubbel.
• [ ] Er is een README.md met duidelijke properties en events.

Publiceren in vijf stappen

1. De uploadpagina openen

Klik na het starten van de lokale service in het linkermenu op "Component uploaden".

2. De componentmap selecteren

De bestandsboom links toont de map die met dir in het configuratiebestand is opgegeven. Navigeer naar de componentmap, selecteer die en klik op "Selecteren".

3. De preview configureren

Boven aan de pagina staat een realtime preview, daaronder het configuratiegebied:

Configuratie-item	Beschrijving
Klein venster preview	Het bestand dat op de lijstkaart wordt getoond; afspraak is demo/index.vue
Volledig scherm preview	Het bestand dat op de detailpagina wordt getoond; afspraak is demo/full.vue
Dependencies	Automatisch uit de broncode gescand; controleer vóór het publiceren of er iets ontbreekt
Opmerkingen	Eén zin die het doel van het component beschrijft
Extra informatie	Uitgebreidere toelichting, ondersteunt zoekwoorden

Kies voor Vue / React een .vue-, .jsx- of .tsx-bestand; voor Web Components een .html-bestand.

4. Configuratie genereren

Klik op "Configuratie genereren"; het platform schrijft comp.json:

{
  "__id__": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "MyComponent",
  "version": "1.0.0"
}

Na de eerste geslaagde publicatie schrijft de server __id__ terug. Pas het niet handmatig aan; het is de basis om het component bij latere updates te herkennen.

5. Publiceren

Klik op "Publiceren" nadat je de preview en dependencies hebt gecontroleerd. Na succes verschijnt het component in "Mijn componenten" en komt het volgens de aanbevelingsregels in de componentmarkt.

Hoe het framework wordt herkend

Het platform matcht in deze volgorde en stopt bij de eerste treffer:

1. Er is een index.vue → Vue.
2. Er is een index.jsx / index.tsx → React.
3. In een bronbestand komt customElements.define( of extends HTMLElement voor → Web Component.
4. Er is een index.js zonder registratie van een custom element → React.
5. Geen enkele treffer → geen standaardwaarde; je moet het op de uploadpagina handmatig kiezen.

Met "Componentframework" onder "Extra informatie" op de uploadpagina kun je het herkenningsresultaat overschrijven; de keuze in de interface is bepalend.

Laat één component niet tegelijk van vue en react afhangen

Anders kan het framework niet worden bepaald en mislukken zowel de controle als het renderen.

Dubbele componenten

Het platform voert een gelijkenisdetectie uit. Wordt een component als dubbel beoordeeld, dan:

• komt het niet in de lijsten "Aanbevolen", "Populair" en "Nieuwste";
• is het alleen zichtbaar in "Mijn componenten";
• verschijnt het in de aanbevelingen van vergelijkbare componenten;
• krijgt het na een update ook geen aanbevelingsgewicht.

Zoek vóór het uploaden of er al een vergelijkbaar component bestaat; dat scheelt een ronde herwerk.

Verschil tussen eerste publicatie en update

	Eerste publicatie	Latere update
Ingang	Uploadpagina	Updatepagina of comphub upload
Maakt een component aan	Ja, en schrijft __id__	Nee, voegt alleen een versie toe
Preview/omschrijving optioneel	Ja	Updatepagina wel; CLI niet
Versienummer	Initiële versie	Code wijzigen vereist een versieverhoging

Publicatiefouten oplossen

Verschijnsel	Oorzaak	Oplossing
Melding dat een dependency ontbreekt	De dependency is niet in het huidige project geïnstalleerd	npm install <pkg> in de hoofdmap van het project
Component has no default export	De React-entry heeft alleen named exports	Wijzig naar export default
Web Component-preview meldt dat het module script niet wordt gevonden	De HTML bevat geen <script type="module">, of het staat in de <head>	Zet het in de <body>
Preview is leeg maar de terminal toont geen fout	Resourcepaden gebruiken een alias, of de dependencyversie wijkt een major-versie af	Gebruik relatieve paden en controleer de dependencies
Melding dat bestanden de limiet overschrijden	Eén bestand > 3 MB / totaal > 10 MB / aantal > 30	Comprimeer resources of splits het component

Volgende stappen

• Versies blijven itereren: Bijwerken en versies
• Publiceren vanaf de commandoregel: De CLI gebruiken
• Vanaf nul in de browser ontwikkelen en publiceren: Studio gebruiken