Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 15 12:13
    kmcrawford commented #1188
  • Jun 15 12:13
    kmcrawford commented #1188
  • Jun 15 00:14
    matteofigus commented #1188
  • Jun 15 00:14
    matteofigus commented #1188
  • Jun 15 00:13
    matteofigus commented #1188
  • Jun 15 00:13
    matteofigus commented #1188
  • Jun 14 17:10
    kmcrawford edited #1188
  • Jun 14 17:10
    kmcrawford edited #1188
  • Jun 14 16:48
    kmcrawford review_requested #1188
  • Jun 14 16:48
    kmcrawford review_requested #1188
  • Jun 14 16:48
    kmcrawford opened #1188
  • Jun 14 16:48
    kmcrawford opened #1188
  • Jun 14 16:44
    kmcrawford opened #1187
  • Jun 14 16:44
    kmcrawford opened #1187
  • Jun 14 16:38

    kmcrawford on override-unpkg

    add ability to override unpkg d… (compare)

  • Jun 14 16:38

    kmcrawford on override-unpkg

    add ability to override unpkg d… (compare)

  • May 26 21:36
    snyk-bot opened #1186
  • May 26 21:36
    snyk-bot opened #1186
  • May 26 21:36

    matteofigus on snyk-fix-48974d58547c91a05e271166bef2bae3

    fix: package.json to reduce vul… (compare)

  • May 26 21:36

    matteofigus on snyk-fix-48974d58547c91a05e271166bef2bae3

    fix: package.json to reduce vul… (compare)

Diana Tamas
@dianatamas
Hi, we have been trying to migrate our registry to Kubernetes, but we're facing some issues, mainly when trying to get the list of existing components. We get the following error Error: EACCES: permission denied, mkdir '/srv/app/temp' at Object.mkdirSync (fs.js:921:3). I haven't been able to find where in the code mkdir is called (and why), does anyone have an idea? For more context, we are calling 127.0.0.1:8080/v2 (where /v2 is the prefix that we passed in the registry options, and 8080 the port in the options) in order to get the list of components
Matteo Figus
@matteofigus
@dianatamas when you publish a component you do a PUT to the registry, which is an express app using the multer module that uses a temp folder to save the package before uncompressing it and uploading objects to s3. I suspect the express registry is trying to create the temp folder at launch. You can override that setting in the config. Here is the default: https://github.com/opencomponents/oc/blob/master/src/resources/settings.js#L15
Maybe you can keep the settings as they are, but make sure the app can have write access to that folder
Matteo Figus
@matteofigus
@marcabisamra consider that you get the context.plugins in the registry when you run it with your storage. If you run the registry with the initialised components and you run a component using a valid plugin, and you don't see it there, the plugin may be invalid or not working correctly. But remember that when running locally in dev mode, plugins are not available so you need to mock them: https://github.com/opencomponents/oc/wiki/Cli#mock
Diana Tamas
@dianatamas
Thanks @matteofigus , I ended up changing the default setting and it worked!
Matteo Figus
@matteofigus

Thanks @matteofigus , I ended up changing the default setting and it worked!

:thumbsup:

nico-villalonga
@nico-villalonga
hi @matteofigus, is there absolutely no way to test plugins locally? I'm using oc-graphql-client and cannot test the endpoint until I deploy the component?
Will be using jwt and some customs as well. Having to mock every component is gonna be hard.
Also, is there a way to unmock components? oc does not provide command for that/
Matteo Figus
@matteofigus
The problem is that conceptually plugins are supposed to be layers on top of the registry and the dev mode is supposed to be a sort of a mock itself. What I remember doing, for most of the plugins, was to create a mock that shared the same code of the actual plugin. If you do that, you basically need to spend a bit of time wiring up things, but you should be able to test things locally quite effectively. I am not sure if I can find some examples right now...
This is a PR we made ages ago to enable that...in practice you can have mocks that have the exact signature of the plugin, and you can require the graphql plugin inside your mock... opencomponents/oc#794
Matteo Figus
@matteofigus
@nico-villalonga try setting up the mock as external js file and try writing a wrapper that requires the plugin and exposes the exported methods, it should work. If you have troubles let me know
In regards of "unmocking" the cli just operates with a oc.json file with the mocks stuff, you can just edit that file to edit your mocks
nico-villalonga
@nico-villalonga

@matteofigus thanks for your quick response. I see the oc.json, I'll remove from there if needed then :+1:

I tried the wrapper approach, not sure if understand correclty. I created a file graphql.js under /plugins/mocks and registered the plugin with
oc mock plugin graphql plugins/mocks/graphql.js. registered succesfully, but when executing the query const response = await context.plugins.graphql.execute.query({ query }); then Im getting this error TypeError: Cannot read property 'query' of undefined.

the file looks like this:

`
const graphqlPlugin = require('oc-graphql-client');

// module.exports.register = () => graphqlPlugin.register;
module.exports.register = (_opts, _dependencies, next = () => {}) => {
// next function?
graphqlPlugin.register({ serverUrl: 'https://graphql.bitquery.io/ide/SKHzG7zMJS'}, [], next)
return next();
};

module.exports.execute = () => graphqlPlugin.execute();
`

Matteo Figus
@matteofigus
so I think the execute method is just the one you use to call in the registration, so you should be able to access it just by doing const response = await context.plugins.graphql.query({ query });
(just using my memory here, can you try to console.log(context.plugins)?
nico-villalonga
@nico-villalonga

I did a console.log on the register function (the mock, before delegate to the library) and its writing to console.
also added console.log(context.plugins) on server.ts, right before the query execution and getting this output { graphql: [Function] }. so I changed the execution statement to const response = await context.plugins.graphql().query({ query }); (notice the () right after .graphql), and this result in this error:

{ "errors": [ { "message": "Invalid response from graphql server.", "http": { "status": "Not Found", "code": 404, "body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /SKHzG7zMJS</pre>\n</body>\n</html>\n" } } ] }

Matteo Figus
@matteofigus
aha ok I think that's good progress
I think the mock is now at least working
so I guess the issue now is not anymore within the OC domain :)
perhaps you need to pass an authorisation header or something similar
nico-villalonga
@nico-villalonga
it is, I should change the return on the mock type so I dont have to execute context.plugins.graphql().qeury...
I'll try to troubleshoot why that 404 error. I'm using this endpoint, its just a playground to test out some simple respone
marcabisamra
@marcabisamra
Hi @matteofigus , client.js has an old version of jquery which is conflicting with one of my sites version of jquery.. is there any way around this? The host is quite an old monolithic app so namespacing jquery on the hosts side would be too heavy of a lift
Is there a way we can avoid using jquery?
marcabisamra
@marcabisamra
I read above that including the host's version of jquery first will make oc-client use that one instead of its own... let me try that
Matteo Figus
@matteofigus
Unfortunately jquery is required by the browser client. A version that doesn't require jquery would definitely be nice, all the code needing jquery his here: https://github.com/opencomponents/oc-client-browser/blob/master/src/oc-client.js
marcabisamra
@marcabisamra
It looks like it requests jquery everytime (even if the client already has it), can I open a PR that only requests jquery if it doesn't already exist on the client? It would be a security enhancement as well as lighter payload
Matteo Figus
@matteofigus
What do you think of working on a version that is completely jquery free? As far as I remember, jq is mostly for Ajax requests that maybe we can now do with just fetch?
At the time we cared about ie9 and ie10, perhaps that’s not a concern anymore in 2021
Batuhan Yenidünya
@batuhanyndny
Hi, I've created 3 components using oc-template-react and I want to use tailwindcss with these components but I couldn't find a way to do it. I know oc-template-react supports some post-css but I couldn't configured it. Is there any additional resource for configuring and sharing libraries across components?
Matteo Figus
@matteofigus
@batuhanyndny the easieast is to fork the template, make your own changes to it, and then publish it with a different name to be used as new template. The template is mostly a bunch of webpack configs that you can customise
Ricardo Devis Agullo
@ricardo-devis-agullo
Hello, just created a small PR for oc-client-browser to have the jQuery's off method in the oc.events object :)
opencomponents/oc-client-browser#69
Piotr Bazydło
@pbazydlo
hey, @matteofigus are you fine with me reviewing + merging those PRs? also tests seem to be failing because they are not able to start chrome 48, do you remember if the browser version there set to something old intentionally, or if it's just the pipeline showing its age? :P
Matteo Figus
@matteofigus
Yes @pbazydlo that would be great! I suspect the pipeline is just old 🥲
Piotr Bazydło
@pbazydlo
awesome! thanks for reply :)
Piotr Bazydło
@pbazydlo
@matteofigus can you give me edit rights on travis and sauce labs, it seems I do not have it :/
Herman Ng
@herman-d:matrix.org
[m]
Hi there. I'm doing a POC to setup my oc-registry. I'm having trouble to add the registry from my machine.
oc registry add http://masked-sample-registry.herokuapp.com where it gives me "oc registry not available"
I have setup the registry in heroku using https://github.com/opencomponents/get-started
Just wondering what I'm missing?
1 reply
Florian Barbare
@fbarbare
Hi there! This might be a question more for @matteofigus but maybe @pbazydlo might have an answer too: Are there any specific reasons why oc dev needs to run in the parent folder of the OC itself? Why not allowing it to run in its own folder?
Matteo Figus
@matteofigus
To be consistent with tools that operate with similar folder structures like lerna etc
Oc dev for example needs things like mocks and other stuff that are common to more components, starting off inside would mean reading or writing to the parent which seems wrong
Florian Barbare
@fbarbare
Cool, thanks! :)
Ken Crawford
@kmcrawford
Is there a way to override the template externals to not pull from unpkg?
Ken Crawford
@kmcrawford
I think I figured it out, it’s coming form oc-template-react package.json, I may have to fork it.
Matteo Figus
@matteofigus
Yeah it’s not simple right now, but if you make some progress it would be nice to be able to parametrise that
I think there are bits in the browser client too
Ken Crawford
@kmcrawford
I was looking into overriding some values so I don’t have to fork. I ran into a different issue I haven’t had time to troubleshoot. But looks promising.
Ken Crawford
@kmcrawford
@matteofigus I found the real issue is here, https://github.com/opencomponents/oc-template-react/blob/master/packages/oc-template-react-compiler/lib/viewTemplate.js the template.js that gets generated at build time has unpkg.com hardcoded. An option could be to override this value at publish time with the registry. Otherwise the oc-template-react needs to have overrides, I’m kinda liking the idea to override in a central place.
Ken Crawford
@kmcrawford
@matteofigus I created a draft, that will accomplish what I was referring to above. opencomponents/oc#1188
Mukul Jain
@mukuljainx

Hi Team, thanks for the open components really awesome stuff, we at Innovaccer are developing a system around it, so things can move pretty easily from developer's system to production and less coupling, we also introduce a store mechanism so if components are sharing common data they get them from there.

The main challenge we are facing is for routing! Currently, we have a bunch of React apps that are stitched together with the help of Single SPA and app-level routing is mostly handled by React Router but if a component is packaged with OC and loaded it will not have the react-router context,
What would be your advice and how you guys are handling it

Can't switch to universal router as every would then need to if not the last options, I am trying to make oc components easily adaptable to all. Right now what I though create patterns, like if a team is using react-router, we already have redux in place, from oc components one can dispatch action to parent React component to update route.

Also is there any doc on patterns or best practices with opencomponents?
Ken Crawford
@kmcrawford
@mukuljainx we have a similar SPA application, our OC components are components embedded in a page, so the routing works just like you would expect.