Skip to content

Commit

Permalink
packages update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankushKun
ankushKun committed Sep 23, 2024
1 parent 2f33784 commit b9fd0cf
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 39 deletions.
7 changes: 4 additions & 3 deletions next_app/src/components/drawer/components/package-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,13 @@ function PackageList() {
setLoading(true);
const pop = await ao.dryrun({
process: APM_ID,
tags: [{ name: "Action", value: "APM.GetPopular" }],
tags: [{ name: "Action", value: "APM.Popular" }],
})
setLoading(false);
if (pop.Error) return toast.error("Error fetching popular packages", { description: pop.Error, id: "error" })
const { Messages } = pop;
const msg = Messages.find((msg) => msg.Tags.find((tag: Tag) => tag.name == "Action").value == "APM.GetPopularResponse")
console.log(Messages)
const msg = Messages.find((msg) => msg.Tags.find((tag: Tag) => tag.name == "Action").value == "APM.PopularResponse")
if (!msg) return toast.error("Error fetching popular packages", { description: "No popular response found", id: "error" })
const data = JSON.parse(msg.Data);
setPackages(data);
Expand Down Expand Up @@ -102,7 +103,7 @@ function PackageList() {
return <div key={_} data-active={pkg.PkgID == activePackage?.PkgID} className="p-1 rounded-md px-2 border border-border/30 cursor-pointer data-[active=true]:bg-accent hover:bg-accent/30" onClick={() => viewPackage(pkg)}>
<div>{pkg.Vendor != "@apm" && `${pkg.Vendor}/`}{pkg.Name}</div>
<div className="truncate">{pkg.Description}</div>
<div className="text-xs text-right">{pkg.Installs} installs</div>
<div className="text-xs text-right">{pkg.TotalInstalls} installs</div>
</div>
})
}
Expand Down
2 changes: 1 addition & 1 deletion next_app/src/components/views/components/all-projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function AllProjects() {
projectList.length == 0 && <div className="text-muted">No projects found</div>
}
{
projectList.sort()
projectList.sort((a, b) => a.localeCompare(b))
.map((project, id) => {
const item = <Button variant="ghost" className="bg-accent hover:bg-primary hover:text-white justify-start p-7 max-w-[50vw]"
key={id} onClick={() => {
Expand Down
76 changes: 53 additions & 23 deletions next_app/src/components/views/components/editor/components/package.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button } from "@/components/ui/button"
import { useGlobalState, useProjectManager } from "@/hooks"
import { APM_ID, runLua, TPackage } from "@/lib/ao-vars"
import { APM_ID, runLua, Tag, TPackage } from "@/lib/ao-vars"
import { connect, createDataItemSigner } from "@permaweb/aoconnect"
import { DownloadIcon, ExternalLink, Loader, LoaderIcon, PackageCheckIcon, PackageOpen, Wallet } from "lucide-react"
import Link from "next/link"
Expand All @@ -10,11 +10,14 @@ import { toast } from "sonner"
import { dryrun } from "@permaweb/aoconnect"
import remarkGfm from "remark-gfm"
import { getRelativeTime } from "@/lib/utils"
import { useLocalStorage } from "usehooks-ts"

export default function PackageView() {
const globalState = useGlobalState()
const manager = useProjectManager()
const ao = connect()
const [installed, setInstalled] = useLocalStorage<{ [pname: string]: { [packageName: string]: string } }>("installed-packages", {}, { initializeWithValue: true })
// const [installed, setInstalled] = useState(false)
const [fullData, setFullData] = useState<TPackage | null>(null)
const [fetching, setFetching] = useState(false)
const [installing, setInstalling] = useState(false)
Expand All @@ -23,9 +26,32 @@ export default function PackageView() {
const packageData = globalState.openedPackages.find((pkg) => `${pkg.Vendor}/${pkg.Name}` == globalState.activeFile.split("PKG: ")[1])
console.log(packageData)

async function checkInstalled() {
const res = await runLua(`return require("json").encode(apm.installed or {})`, project.process, [
{ name: "BetterIDEa-Function", value: "Packages" }
])
let { Output: { data: { output } } } = res
if (!output) output = res.Output.data
const installed = JSON.parse(output)
console.log("installed", installed)
if (installed[`${packageData.Vendor}/${packageData.Name}`]) {
setInstalled(p => {
if (!p[project.process]) p[project.process] = {}
p[project.process][`${packageData.Vendor}/${packageData.Name}`] = installed[`${packageData.Vendor}/${packageData.Name}`]
return p
})
}
}

useEffect(() => {
if (!packageData || !globalState.activeFile) return
if (!globalState.activeFile.startsWith("PKG:")) return
checkInstalled()
}, [globalState.activeFile])

useEffect(() => {
if (!packageData || !globalState.activeFile) return
if(!globalState.activeFile.startsWith("PKG:")) return
if (!globalState.activeFile.startsWith("PKG:")) return
if (packageData.PkgID) {
setFullData(null)
setFetching(true)
Expand All @@ -46,23 +72,14 @@ export default function PackageView() {
}).finally(() => setFetching(false))
}
}, [globalState.activeFile])

async function loadapm() {
if (!globalState.activeProject) return toast.error("No active project", { description: "You need to have an active project to use Packages", id: "error" })
const p = manager.getProject(globalState.activeProject);
//dryrun and check if apm is already installed
const dry = await ao.dryrun({
process: p.process,
tags: [
{ name: "Action", value: "APM.UpdateNotice" }
],
data: "CHECK"
})
if (dry.Output.data == "CHECK") return
console.log("Installing apm")
const res = await fetch('https://raw.githubusercontent.com/ankushKun/ao-package-manager/main/client-tool.lua');
const res = await fetch('https://raw.githubusercontent.com/betteridea-dev/ao-package-manager/refs/heads/main/client/client.lua');
const apmSource = await res.text();
const loadResp = await runLua(apmSource, p.process, [{name:"BetterIDEa-Function", value:"Load-APM"}])
const loadResp = await runLua(apmSource, p.process, [{ name: "BetterIDEa-Function", value: "Load-APM" }])
console.log(loadResp)
if (loadResp.Error) return toast.error("Error loading APM", { description: loadResp.Error, id: "error" })
}
Expand All @@ -78,7 +95,7 @@ export default function PackageView() {
tags: [
{ name: "Action", value: "Eval" }
],
data: `APM.install("${packageData.Vendor}/${packageData.Name}")`,
data: `apm.install "${packageData.Vendor}/${packageData.Name}"`,
signer: createDataItemSigner(window.arweaveWallet)
})
console.log("install request: ", m_id)
Expand Down Expand Up @@ -139,6 +156,19 @@ export default function PackageView() {
// else
// toast.success("Package installed successfully", { description: `Now you can import it using require('${data.Vendor == "@apm" ? "" : data.Vendor + "/"}${data.Name}')` })
setInstalling(false);
//parse through messages and find a tag with name "Result"
//if the value is "success" then package is installed
//if the value is "error" then package is not installed

const { Messages } = res
console.log("msgs", Messages)


// setInstalled(p => {
// if (!p[project.process]) p[project.process] = {}
// p[project.process][`${packageData.Vendor}/${packageData.Name}`] = "installed"
// return p
// })
}

if (!packageData) {
Expand All @@ -154,30 +184,30 @@ export default function PackageView() {
<div className="w-full">
<div className="font-medium text-2xl">{packageData?.Name}
<span className="mx-4 text-sm bg-accent px-1.5 rounded-md">v{packageData.Version}</span>
<span className="text-sm bg-accent px-1.5 rounded-md">Updated { packageData.Updated==0?"NA":getRelativeTime(packageData.Updated)}</span>
<span className="text-sm bg-accent px-1.5 rounded-md">Updated {packageData.Timestamp == 0 ? "NA" : getRelativeTime(packageData.Timestamp)}</span>
</div>
<div className="text-sm flex gap-5 items-center">
<span>by {packageData.Vendor}</span> ·
<span><DownloadIcon className="inline pb-1" size={18} /> {packageData.Installs}</span>
</div>
<div className="text-sm my-2">{packageData.Description}</div>
<div className="flex gap-1.5">
<Button variant="default" disabled={!globalState.activeProject || !project.process || installing} className="rounded-none h-6 p-3 text-white mr-auto" onClick={installPackage}>Install {installing&&<Loader className="animate-spin ml-2" size={16}/>}</Button>
<Link href={`https://apm.betteridea.dev/pkg?name=${packageData.Vendor}/${packageData.Name}@${packageData.Version}`} target="_blank"><Button variant="default" className="rounded-none h-6 p-3 text-white">APM <ExternalLink size={16} className="ml-1 pb-0.5" /></Button></Link>
<Link href={packageData.RepositoryUrl||"#"} target="_blank"><Button variant="default" className="rounded-none h-6 p-3 text-white">Repository <ExternalLink size={16} className="ml-1 pb-0.5" /></Button></Link>
<Button variant="default" disabled={!globalState.activeProject || !project.process || installing} className="rounded-none h-6 p-3 text-white mr-auto" onClick={installPackage}>{installed[project.process][packageData.Vendor + "/" + packageData.Name] ? "Update" : "Install"} {installing && <Loader className="animate-spin ml-2" size={16} />}</Button>
<Link href={`https://apm.betteridea.dev/pkg?name=${packageData.Vendor}/${packageData.Name}`} target="_blank"><Button variant="default" className="rounded-none h-6 p-3 text-white">APM <ExternalLink size={16} className="ml-1 pb-0.5" /></Button></Link>
<Link href={packageData.Repository || "#"} target="_blank"><Button variant="default" className="rounded-none h-6 p-3 text-white">Repository <ExternalLink size={16} className="ml-1 pb-0.5" /></Button></Link>
</div>
</div>
</div>
<div className="text-sm mt-3 flex gap-1 text-muted text-nowrap">
<Wallet size={16}/> <span> {packageData.Owner}</span> <PackageCheckIcon className="ml-5" size={16}/> <span> {packageData.PkgID}</span>
<Wallet size={16} /> <span> {packageData.Owner}</span> <PackageCheckIcon className="ml-5" size={16} /> <span> {packageData.PkgID}</span>
</div>
<hr className="my-3" />
{!packageData?.README && <LoaderIcon className="animate-spin mx-auto" /> }
{!packageData?.Readme && <LoaderIcon className="animate-spin mx-auto" />}
<Markdown remarkPlugins={[remarkGfm]} className="markdown" components={{
a: ({node, ...props}) => <a {...props} className="text-primary hover:underline" />,
a: ({ node, ...props }) => <a {...props} className="text-primary hover:underline" />,
}}>
{
Buffer.from(packageData?.README||"",'hex').toString()
Buffer.from(packageData?.Readme || "", 'hex').toString()
}
</Markdown>
</div>
Expand Down
43 changes: 31 additions & 12 deletions next_app/src/lib/ao-vars.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,19 +110,38 @@ export type Column = {
notnull: number;
type: string;
}

export type TDependencies = {
[key: string]: {
"version": string
}
}
export type TPackage = {
Description: string;
Installs: number;
Name: string;
Owner: string;
PkgID: string;
RepositoryUrl: string;
Updated: number;
Vendor: string;
Version: string;
README: string;
Items: string;
ID: string
Vendor: string
Name: string
Version: string
Versions?: string[]
Description: string
Owner: string
Readme: string
PkgID: string
Source: string
Authors: string[] | string
Dependencies: TDependencies | string
Repository: string
Timestamp: number
Installs: number
TotalInstalls: number
Keywords: string[]
IsFeatured: boolean
Warnings: {
modifiesGlobalState: boolean
installMessage: string
} | string
License: string
Main?: string
////////////
installed: boolean
}

export async function spawnProcess(name?: string, tags?: Tag[], newProcessModule?: string) {
Expand Down

0 comments on commit b9fd0cf

Please sign in to comment.