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
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
20 replies
/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
Codes Reference: https://docs.piral.io/code/search
19 replies
packages/my-pilet/src/index.tsx)
6 replies
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
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
48 replies
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
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
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
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
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
And is it true that without HMR the application would just use the basic browser refresh on change?
8 replies
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)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
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
piral-cli-webpack5 the following and similar error occurs:ERROR in ./src/AppContent.tsx 3:0-45
Module not found: Error: Can't resolve 'style-loader' in '/Users/work/IdeaProjects/wrwks/bef/bef-frontend-ui'
@ ./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/layout/CookieCheck.tsx 5:0-59 10:123-143
@ ./src/index.tsx 6:0-51 7:41-52regarding 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
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
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
"regenerator": true
}] to the config but even then it didn't work ?
2 replies
8 replies
21 replies
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?