I want to rebuild my Stencil.js project from a build

Question

My project was erased and I only have the build.

I wanted to deployment my stencil project in server, using "WWW" output, but I have some problems, for that I tried to use some propertys in this doc:

https://stenciljs.com/docs/www

I wasn't understand the "DIR" property (I don't now what is a: "web distribution directory"), for that i added the next code In the "stencil.config.ts" file.

dir: ".", 

The result:

import { Config } from '@stencil/core';
export const config: Config = {
  namespace: 'cosmo',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      dir: ".",
      serviceWorker: null, // disable service workers
    },
  ],
};

When I put the command "npm run build" in the terminal, all my project was erased, including the ".git" archives, but the image in the "assets" folder were not deleted. I can't recovery the proyect, but I have the "build". for that I wanted to recovery my project using the build.

My erased project, only have the folders, all is empty

¿I can rebuild my project using the build? (I'm not desperate, I was just starting out, I could rebuild everything in one day)

Build

Answer 1

You can restore some of the code, yes. But probably not the types unless you have a dist backup as well.

Start by looking at the files that have the same name as your components and end in .entry.js. These are the main component files. If you imported an external function into a component it might also be in this file. I'd recommend creating a new Stencil project, generating a component and then copying the code from the entry file.

The main things you'll have to change:

1. Add the properties including the decorators (e.g. @Prop). If they were initialised with a value they should be in the constructor. Watchers are defined in a watchers() getter, @Element to a el() getter. @Events are defined in the constructor with a createEvent function. @Listens (as well as some more data about @Props (such as whether they reflect their value) can be found in app.esm.js but that involves diving into the flags that Stencil uses (if you had set a custom namespace then replace "app".
2. Move the CSS from the JS string to a CSS file.
3. Change the render function to TSX. The built files will have calls to an h() function with the following parameters: d(tagName, properties, ...children) 1 . Do the same for any files which might be imported from the entry file.

Example:
Minified:

  render() {
    return (h("div", { class: "app-home" }, h("p", null, "Welcome to the Stencil App Starter.")));
  }

Un-minified:

  render() {
    return <div class="app-home">
      <p>Welcome to the Stencil App Starter.</p>
    </div>;
  }