## Where communities thrive

• Join over 1.5M+ people
• Join over 100K+ communities
• Free without limits
##### Activity
• Feb 02 2020 12:39
HeReleased Piral v0.10.0
• Feb 02 2020 12:36
Hello!
• Feb 02 2020 12:06
Hello!
Michel van den Berg
@promontis
Alan Raison
@alanraison
Hi all. I was trying to get a piral project set up in a monorepo but I'm still a little confused by the process. Could someone please step me through it? I think I am confused because piral build --type emulator builds an npm package that isn't part of the normal dependency tree, and my pilet is having trouble resolving it. Does anyone have an example project?
5 replies
Michel van den Berg
@promontis
Does Piral support https://vitejs.dev/?
5 replies
Michel van den Berg
@promontis
Shouldn't the fileLoader in the webpack config (https://github.com/smapiot/piral/blob/develop/src/tooling/piral-cli-webpack/src/configs/common.ts) output those files to the output folder?
18 replies
Stefan Bley
@sbley
In piral-ng, is there are way to configure the BootstrapModule? I would like to add the CUSTOM_ELEMENTS_SCHEMA in order to display web components (custom elements).
20 replies
Michel van den Berg
@promontis
@FlorianRappl can pilets depend on other pilets?
49 replies
Michel van den Berg
@promontis
For the piral-translate plugin, do I understand it correctly that translations for a specific pilet go inside that pilet? Because I read that you can also set it from the piral instance.
4 replies
Michel van den Berg
@promontis
Can we update piral-cli-webpack to postcss 8?
32 replies
Robin
@Robbson
Hi all. I don't fully grasp how to use image resources in pilets. It's no big deal to require them, because webpack bundles all images and they are part of the pilet bundle. The problem is, when the Piral Instance as well as its pilets are loaded and the image file is requested, it's always requested from the root path (and host) of the application (the Piral instance itself) like /some-image.png. But the image is part of a pilet on a pilet feed, so I would expect it would be something like piletfeed-host:5678/files/my-pilet/1.0.0/some-image.png, right? Or did I miss something?
6 replies
Alcore97
@Alcore97
Hi, i'm totally newbie in Piral and i'm trying to follow the fisrt tutorial. I had a problem when i run the command: "pilet new .\my-app\dist\emulator\my-app-1.0.0.tgz --target my-pilet". The folder my-pilet is created but i get a empty src folder. The terminal throw me that error: \ Taking care of templating ...Unexpected token i in JSON at position 15
Codes Reference: https://docs.piral.io/code/search
19 replies
what i'm doing wrong?
Alan Raison
@alanraison
A while ago there was some discussion around type definitions from the instance; I am also having trouble resolving PiletApi from a pilet to the instance; the instance doesn't have an index.d.ts, so how should this be generated? In any case the instance doesn't have any exports, so not sure how this should work. I see this issue in https://github.com/piral-samples/piral-monorepo-sample (packages/my-pilet/src/index.tsx)
6 replies
Michel van den Berg
@promontis
Defintions of extensions are never shared, right? Like in https://github.com/piral-samples/piral-microfrontend-demo/blob/master/team-blue/src/index.tsx#L8 has the typings for the BuyButtonExtension, but the place that hosts the extensions (https://github.com/piral-samples/piral-microfrontend-demo/blob/master/team-red/src/index.tsx#L11) does not share that definition.
13 replies
Michel van den Berg
@promontis

When in a monorepo, I was having troubles with the sourcemaps; all pilets build sourcemaps with urls like webpack:///.src/*. I run pilet debug […pilets] from the root directory btw.

Currently, I’m putting a custom webpack.config.js for each pilet with ...

module.exports = function (config) {

config.output.devtoolNamespace = “<pilet name>";

return config;
};

This way the sourcemap url is something like webpack://<pilet name>/.src/* and then I can use sourceMapPathOverrides to map the url to the correct folder, for a specific pilet.

Eg.

"sourceMapPathOverrides": {
"webpack://registration/*": "\${workspaceFolder}/registration/*"
},

Where registration is a pilet.

Is this ok and needed, or am I doing something that should already come out of the box?

29 replies
Michel van den Berg
@promontis
Anyone implemented an undo/redo plugin for Piral yet? Does that make sense?
3 replies
Michel van den Berg
@promontis
I have this use case where I’m doing 2d drawing. The 2d drawing component lives within a pilet, let’s call it the drawing-pilet. The drawing component knows how to draw some basic shapes, but the details of those shapes (the catalog) is build from multiple other pilets. I would like to expose some api for the drawing-pilet to those other pilets, so that I can e.g. register the catalog (from multiple pilets), or select drawing tools (also from multiple pilets). What’s the best way to do this?
48 replies
Michel van den Berg
@promontis
Does Piral support the new jsx transform?
27 replies
Michel van den Berg
@promontis

I’m trying to use Valtio (https://github.com/pmndrs/valtio) as the state management library for my drawing api. The drawing api is a library, and is very much like a plugin; it extends the Pilet API and provides a drawingSurface component. The Pilet API basically has methods to update the drawingSurface. I host the drawingSurface component in a pilet, and 4 other pilets call the Pilet API methods.

This all works, except that I would like to have one drawing state and I think I now have a state per pilet (so, from what I can see, I now have 5 state ‘stores’).
How to fix this?

27 replies
sakshipalhani
@sakshipalhani

Hi,I just started with the piral.io.I would like to use this for integrating my microfronted application with already exist .netcore rect application
so first I am tring to integrate the https://feed.piral.cloud/api/v1/pilet/sample with .netcore with Rect application by using piral-core
I made some changes in the index.js file as follows
import { Layout } from './components/Layout';
import { Piral, createInstance, SetComponent } from 'piral-core';

const feedUrl = 'https://feed.piral.cloud/api/v1/pilet/sample';

const AppPilet = createInstance({
requestPilets() {
return fetch(feedUrl)
.then(res => res.json())
.then(res => res.items);
},
});
render((
<Piral instance={AppPilet}>
<SetComponent name="Layout" component={Layout} />
</Piral>
), document.querySelector('#app'));

but i am getting log errors

8 replies
Michel van den Berg
@promontis
In the docs I see… import { PiletApi } from 'my-app’; … whereas my-app is the piral instance. Should the piral instance export the PiletApi? I was doing import { PiletApi } from "piral”; … is that wrong?
75 replies
Michel van den Berg
@promontis
Why does pilet debug runs yarn add piral-cli-webpack@0.13.3 —dev?
11 replies
contactsamie
Hi , newbie here, quick question , how do I create a pilet without creating a piral? i tried and got "Could not find a valid Piral instance. "
contactsamie
upon fooling arround , it seems like i need to have some throw away container piral for my pilet
Florian Rappl
@FlorianRappl
You could just use sample-piral, which is the app shell used for the full demo.
contactsamie
@FlorianRappl Thanks
contactsamie
I'm one opf those just waking up from the past..., I dont know react or any of the fancy stuff, i'd appreciate if any one could help me with a piral+pilets example or tutorial that is based on just vanilla javascript
Michel van den Berg
@promontis
When we have a shared package (bundled in the piral instance and not in the pilets), should we only include the shared package in the devDependencies and not in the peerDependencies? I thought I read that I should also include the shared package in the peerDependencies, but looking at https://github.com/piral-samples/piral-admin-template/blob/c0d2ad2a0ba0e5f1f51d8a7e0741a7bc9e05bd47/packages/pilet-messages/package.json, it isn’t there.
60 replies
Michel van den Berg
@promontis

I was looking at https://docs.piral.io/guidelines/tutorials/09-pilet-best-practices#testing-extensions yesterday. The example given is pretty self explanatory and I was wondering how this looks for a more complex use case.

As in, what happens if the piral.Extension component also has some params and that there is some (or maybe a lot) logic happening in the composition that hosts the extension (slot)? Would we need to duplicate that (some, or a lot) logic for the ‘playground’? Or does the playground provide a more simplified version of that logic?

5 replies
Stefan Bley
@sbley
I noticed that piral.fromNg() wraps a <div data-portal-id ng-version> around the component to be rendered whereas with React there is no wrapper div. Now, this div can be troublesome especially when providing an Angular component to an extension slot with the extension provider not expecting/allowing this wrapper div.
Is there a chance to get rid of this div? For example, could the data-portal-id and ng -version attributes be applied to the root element of the Angular component?
11 replies
Michel van den Berg
@promontis
When I disable a pilet in the Available Pilets list of the Piral Inspector, nothing happens in my UI. I would expect it to be updated/refreshed without the components/extesions provided by the just disabled pilet. Do we need to do something for this?
Robin
@Robbson
I tried to disable HMR using the flag of the pilet debug tooling. Unfortunately when doing so the Piral Instance doesn't load anymore, there is no error or anything besides the "Loading" message. I am using webpack 4 and the latest Piral build. Any ideas?
And is it true that without HMR the application would just use the basic browser refresh on change?
8 replies
Andras Hatvani
@andrashatvani

hi, starting with piral version 0.13.5 the build (piral build) fails with the following and similar errors:

ERROR in ./src/AppContent.module.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./src/AppContent.module.css)
CssSyntaxError

(1:1) /Users/work/IdeaProjects/wrwks/bef/bef-frontend-ui/src/AppContent.module.css Unknown word

> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 |             var content = require("!!../node_modules/css-loader/dist/cjs.js!./AppContent.module.css");

up to piral version 0.13.4 it works fine - any ideas?

27 replies
Andras Hatvani
@andrashatvani
when trying to use piral-cli-webpack5 the following and similar error occurs:
ERROR in ./src/AppContent.tsx 3:0-45
@ ./src/piral-application.tsx 5:0-42 41:44-54
@ ./src/App.tsx 16:0-54 26:19-36 66:9-12
@ ./src/LangAndSentryWrapper.tsx 7:0-24 49:38-41
@ ./src/index.tsx 6:0-51 7:41-52
4 replies
Andras Hatvani
@andrashatvani

regarding dependency sharing, on https://docs.piral.io/guidelines/tutorials/15-share-dependencies the following is stated:

Besides the dependencies that are specified in the externals list of the package.json the following dependencies are anyway always added:

react
react-dom
react-router
react-router-dom
...

yet still, when i scaffold a new pilet then these dependencies are added again in both:

“devDependencies”: {
…
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router": "5.2.1",
"react-router-dom": "5.3.0”,
…
},
"peerDependencies": {
...
"react": "*",
"react-dom": "*",
"react-router": "*",
"react-router-dom": "*",
…
}

so what do i really win by dependency sharing?

22 replies
Andras Hatvani
@andrashatvani

when providing moment as shared dependency, then the following locale setting has no effect:

moment.locale('de-at')

nothing else has changed, except that moment is now only a peer dependency instead a direct one
regardless of where this statement will be put, it has no effect even in the app shell

3 replies
Michel van den Berg
@promontis
Is an option to skip (if the version is already in the feed) for publish-pilet --fresh something? I’m now doing publish-pilet --fresh, but sometimes I forget to update the version, so it first does the whole build and pack, and then it fails. Maybe it is faster to first check the version it is going to build and pack, and if it is already in the feed, don’t build it? Or is my workflow weird :) ?
6 replies
Mondher Acheche
@greenmirage
2 replies
Hi, newbie here. Tried to set up and piral and pilet with webpack . So far so good,only problem is when i try to set babel i get this error,
this is my shell and pilet babel.config file content
the online solution suggest adding ["transform-runtime", {
"regenerator": true
}] to the config but even then it didn't work ?
2 replies
Gerald Leeb
@gerald24
Hi, can I pass config parameters to kras server when starting it indirect with pilet debug?
The reason for this need is to activate a .krasrc for dev mode and just use the mocks injectors in test mode
8 replies
The settings in .krasrc for "map" will overrule the mock injectors
MayankASU
@MayankASU
Hi, I am experimenting with piral-blazor and I am having some issues with it. So I have an existing Blazor WASM application and I am able to convert it into a pilet, but this newly generated pilet has some issues with the blazor.codegen file. This module cant be detected within the index.tsx file where the setup function is defined and on top of that there are lot of syntactic errors in the blazor.codegen file. Any leads on this would be helpful.
21 replies
Michel van den Berg
@promontis
piral declaration only looks for typings in the app shell right? Can we like publish typings (say for events) from a pilet to the feed, and then have it picked up? Or should we like create a seperate events package?
12 replies
Michel van den Berg
@promontis
I was thinking of publishing an event from my state store (plugin/api specific) after I updated the state itself. What is a good way to provide the on api to that place?
8 replies
Jeff Trung
@jefftrung_gitlab
Hi, piral is awesome, but the community doesn't seem to care much about this project. I hope piral doesn't stop because of that!
3 replies
Nate Von Benken
@nvonbenken

Not sure if I'm missing something in the Piral docs but I can't seem to find what I'm looking for. I have a Piral shell that I have set up with two Pilets, both in React.
On one Pilet is a simple counter with an increment and a decrement button, as well as a span that shows the current count.
The other Pilet has a simple div with some placeholder text.

When I navigate from one Pilet to the other, the state from the counter Pilet is reset. How would I preserve it so I can navigate away and come back to it?